Как сделать границы таблицы в html

Урок 8. Таблицы в html

Таблица в html – один из основных и первых методов вёрстки web-страниц. До того, как CSS стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.

Таблица в html состоит из строк и ячеек в этих строках. Это не опечатка, не из строк и столбцов, а именно из строк и ячеек. Считывание информации по таблице в html идёт построчно.

Проще говоря смысл написанного кода такой:
Первая строка – 1-ая, 2-ая . ячейки, Вторая строка – 1-ая, 2-ая . ячейки, Третья строка. и так далее.

Теги, используемые для построения таблицы в html

table – обязательный тег, открывающий и закрывающий таблицу
caption – необязательный тег, обозначающий заголовок таблицы
th – необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr – обязательный тег, с которого открывается и закрывается строка
td – обязательный тег, обозначающий открытие и закрытие ячейки в строке

Пример кода простой таблицы

В браузере отобразится

Назначение таблиц в html

Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ, ширину, границу и другие параметры, что придаст ей красивый внешний вид. Таблица – Ваш первый шаг к понимаю web-дизайна! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) – было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой.

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

У тега table есть следующие атрибуты:

width – ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor – цвет фона ячеек таблицы
background – заливает фон таблицы рисунком
border – рамка и границы в таблице. Толщина указывается в пикселях
cellpadding – отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th) и зададим параметр атрибуту border (граница), width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

В результате в браузере будет выведена таблица следующего вида

frame – атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:

void – рамки нет,
above – только верхняя рамка,
below – только нижняя рамка,
hsides – только верхняя и нижняя рамки,
vsides – только левая и правая рамки,
lhs – только левая рамка,
rhs – только правая рамка,
box – все четыре части рамки.

rules – атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:

none – между ячейками нет границ,
groups – границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows – границы только между строками,
cols – границы только между стобцами,
all – отображать все границы.

Читать еще:  Как сделать из бумаги скелета

Рассмотрим пример кода

Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице. Для этого есть следующие уже знакомые параметры:

align – выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing – расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding – отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример

В браузере отобразится выравненная по центру таблица следующего вида

Строки tr и ячейки td в таблицах HTML

Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.

Для тегов tr и td есть следующие

align – выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign – выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor – задает цвет строки
width – ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height – высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

Результат

С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!)

Спасибо за внимание! Надеюсь материал был полезен!

Границы HTML таблиц без CSS

Windows : Internet Explorer 3.0+, Netscape 3.04+, Opera 3.50+ [ 1 ], Mozilla 0.6+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+.

Linux : Netscape 3.04+, Opera 5.0+, Mozilla 0.6+, Firefox 1.0+, Chromium, SeaMonkey 1.0+, Netsurf 3.0, Dillo [ 2 ].

HTML / XHTML. Код:

Границы HTML таблиц без CSS

HTML / XHTML. Код:

Границы HTML таблиц без CSS

Пример n.3 – для Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne. Работает так же в других веб браузерах:

HTML / XHTML. Код:

Границы HTML таблиц без CSS

Границы HTML таблиц без CSS

Некогда, главным образом (но не только) в 1990ые существовало несколько приемов HTML, использовавшихся, что бы добиться некоторых эффектов, которые ныне делаются с помощью CSS. Обращение с границами HTML таблиц было одним из них.

В данном случае на самом деле имеет место не обращение с границами, а его имитация через использование атрибутов cellspacing и bgcolor. В настоящее время, аналогично тому, как обстоит дело с выравниванием содержимого страницы по центру с помощью тега table, этот способ полне работающий, пусть и устаревший в плане своей концепции.

Общая идея

1. Атрибут bgcolor тега table используется для того, что бы сделать фон таблицы определенного цвета.

2. Атрибут bgcolor тега tr используется, что бы сделать фон содержимого таблицы (строки и ячейки) определенного, отличного от фона таблицы, цвета.

3. Атрибут cellspacing тега table используется, что бы создать пространство в определенное число пикселов вокруг ячеек таблицы. Это пространство получает цвет, заданный атрибутом bgcolor тега table. Поскольку он отличается от фона строк и ячеек, то это создает вокруг ячеек визуальные границы цвета фона таблицы.

Читать еще:  Как сделать детскую беседку своими руками

Упомянутые шаги создают в Arachne визуальные границы только между ячейками таблицы, а не вокруг них. И эти шаги не создают вообще никакой визуальной границы в Netscape 3.04-6.0 и Mozilla 0.6-0.92. Так что следует добавить еще одну таблицу вокруг первой.

Атрибут bgcolor тега table убирается из внутренней таблицы и прописывается во внешней. Значение атрибута cellspacing внешней таблицы устанавливается равным “0”. Это создает требуемые визуальные границы и в Arachne, и в Netscape 3.04-6.0, Mozilla 0.6-0.92.

Данный метод работает не только в Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne, но так же в других веб браузерах, так что его можно использовать как универсальный способ.

Страница-пример для Internet Explorer 3.0 – внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Страница-пример для Netscape 3.04-6.0 и Mozilla 0.6-0.92 – внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Netscape Navigator 3.04 для Windows ( Cкачать )

Netscape Communicator 4.7 для Windows ( Cкачать )

Netscape Navigator 6.01 для Windows ( Cкачать )

Mozilla 0.6 для Windows ( Cкачать )

Mozilla 0.92 для Windows ( Cкачать )

Страница-пример для Arachne – внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Arachne 1.70 для DOS ( Cкачать )

Arachne 1.95 для DOS ( Cкачать )

Так же в Opera 2.12 – 3.50, но с некоторыми недостатками.

Dillo – частично. Dillo не поддерживает атрибут height для td или tr. Сам прием создания визуальных границ в таблицах работает.

Создание таблицы в HTML

В языке разметки HTML таблицы используются не только для представления каких-либо данных в виде строк и столбцов, но и как средство форматирования страниц и задания расположения различных элементов.

Другими словами, в HTML оформление таблицы может быть вовсе не заметным, однако выполнять функцию каркаса, занимая всю веб-страницу.

Можно поместить, например, в её левый столбец меню, основную информацию в средний, а контактные данные — в правый.

Итак, как сделать таблицу в HTML?

Создадим простейшую таблицу, содержащую три ячейки одной строки с помощью приведенного ниже кода:

В окне браузера только что созданная таблица выглядит следующим образом:


Таблица начинается с тега

Ячейки строки описываются слева направо с помощью тегов

Границы и рамки

По умолчанию в таблице нет границы. Добавить её можно с помощью атрибута border тега

Цвет фона и текста

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам

  • background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
  • bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег .

Читать еще:  Как сделать видео с музыкой в инстаграм

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега

  • cellspacing — расстояние между границами соседних ячеек;
  • cellpading — расстояние между содержимым и границей ячейки.

Визуальное отображение данного кода в браузере таково:

Выравнивание таблицы в HTML

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное ( align ) и вертикальное ( valign ) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

  • left — выравнивание по левой границе;
  • right — выравнивание по правой границе;
  • center — выравнивание по центру.

Параметр valign может иметь такие значения:

  • bottom — выравнивание по нижней границе;
  • top — выравнивание по верхней границы;
  • middle — выравнивание посередине.


Как сделать таблицу по центру в HTML? С помощью упомянутого значения center .

Вставка изображения в HTML таблицу

У вебмастеров часто возникает вопрос о том, как вставить картинку в HTML таблицу? Для того чтобы это осуществить, необходимо прописать адрес или имя изображения в соответствующей ячейке после тега


Дополнительными атрибутами в данном случае являются:

  • width — ширина;
  • height — высота;
  • alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
  • title — подпись к картинке;
  • align — горизонтальное выравнивание;
  • valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег , его можно использовать в качестве ссылки.

Объединение ячеек в HTML таблице

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега

Объединение столбцов одной строчки выглядит так:


У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

Генераторы HTML таблиц

Разумеется, создавать HTML таблицы можно самостоятельно, прописывая вручную все теги HTML. Таблица в данном случае рискует быть составленной некорректно, поскольку человеческий фактор при работе с большими объёмами информации даёт о себе знать.

Уже давно существуют специальные генераторы таблиц HTML, которые призваны сэкономить ваше время. С их помощью вы можете легко создать таблицу с множеством настроек.

Одним из наиболее распространенных генераторов таблиц является русскоязычный сервис http://rusws.ru/genertabtag . В его арсенале имеется множество настроек для построения таблиц: вы можете задать цвет фона, выравнивание, ширину таблицы, толщину рамки и т.д.


Несмотря на то, что сервис http://www.2createawebsite.com/build/table_generator.html является зарубежным, настроек для генерации таблицы здесь меньше, чем в предыдущем примере. Имеются лишь самые необходимые — количество столбцов, строк, ширина, размер, цвет границы.

Это — отличный вариант для генерации простейших таблиц, однако для более серьёзных целей рекомендуем воспользоваться другими сервисами:


Генератор таблиц html также имеет не слишком много настроек, однако цвет для фона и границы таблицы вы можете подобрать из палитры цветов.

Этот же сервис имеет довольно удобный HTML редактор, в котором можно построить, заполнить таблицу, а затем получить её код:


Таким образом, таблица является не только важным статистическим элементом во всех сферах жизни, но и неотъемлемой частью веб-дизайна и вёрстки.

Если вы решили воспользоваться услугами генератора таблиц, стоит внимательно подойти к выбору подходящего вам сервиса, опробовав самые популярные из них и выбрав наилучший.

Источники:

http://tradebenefit.ru/tablica-v-html

http://www.kompx.com/ru/granicy-html-tablic-bez-css.htm

http://www.internet-technologies.ru/articles/sozdanie-tablicy-v-html.html

Ссылка на основную публикацию
Статьи на тему: