Таблицы | htmlbook.ru
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
Создание таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.
Пример 12.1. Создание таблицы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TABLE</title>
</head>
<body>
<table border="1" cellpadding="5">
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>
</html>Порядок расположения ячеек и их вид показан на рис. 12.1.
Рис. 12.1. Результат создания таблицы с четырьмя ячейками
htmlbook.ru
| HTML | WebReference
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Таблица размеров обуви</title> </head> <body> <table> <caption>Таблица размеров обуви</caption> <tr> <th>Россия</th> <th>Великобритания</th> <th>Европа</th> <th>Длина ступни, см</th> </tr> <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr> <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr> <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr> <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr> <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr> <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr> <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr> <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr> <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr> <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr> <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr> <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr> <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr> <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr> <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr> <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr> <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr> <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr> <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr> <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr> <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr> </table> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид таблицы
webref.ru
Table — HTML тег таблицы
Доброго времени уважаемые подписчики!
Сегодняшний урок мы посвятим созданию таблиц в языке HTML. Таблицы в HTML создаются с помощью тега table.
В WEB таблицы — это не только какие-то отчетные данные, не только расписание или еще что-нибудь в этом стиле. В WEB таблицей можно задать целую структуру сайта.
Сколько вы таких страниц видели в Internet?
Тысячи и тысячи. Но если разобраться, то это вот такая таблица.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееСпросите вы, а как располагаются элементы на странице, ровно? А они заключаются в свои таблицы и выравниваются нужным образом.
Благодаря тому, что в каждую ячейку одной таблицы, мы можем поместить новую таблицу любой структуры (или даже несколько таблиц), можно добиться требуемого результата.
HTML-тегом таблицы является тег table, строкой таблицы является тег tr, а столбцом таблицы — тег td.
Таблица заполняется по строкам сверху вниз, а по столбцам слева на права. Количество столбцов в строке должно быть одинаково для всех строк.
Давайте рассмотрим пример, и вы сразу все поймете.
Сделаем такую таблицу:
Сделаем это следующим образом:
Ставим тег <table> и начинаем формировать первую строку, пишем:
<tr> <td>Ячейка 1 строка 1</td> <td>Ячейка 2 строка 1</td> <td>Ячейка 3 строка 1</td> </tr>
<tr> <td>Ячейка 1 строка 1</td> <td>Ячейка 2 строка 1</td> <td>Ячейка 3 строка 1</td> </tr> |
У нас получилась первая строка таблицы с тремя столбцами. Аналогично формируем вторую строку:
<tr> <td>Ячейка 1 строка 2</td> <td>Ячейка 2 строка 2</td> <td>Ячейка 3 строка 2</td> </tr>
<tr> <td>Ячейка 1 строка 2</td> <td>Ячейка 2 строка 2</td> <td>Ячейка 3 строка 2</td> </tr> |
И третью:
<tr> <td>Ячейка 1 строка 3</td> <td>Ячейка 2 строка 3</td> <td>Ячейка 3 строка 3</td> </tr>
<tr> <td>Ячейка 1 строка 3</td> <td>Ячейка 2 строка 3</td> <td>Ячейка 3 строка 3</td> </tr> |
Наши три строки сформированы, осталось закрыть тег </table>.
Наша таблица готова.
Если таблице нужно дать заголовок, то за это отвечает тег <caption> Заголовок таблицы </caption> .
По умолчанию он располагается по центру, над таблицей. Тег заголовка таблицы необходимо размещать между тегом
В принципе заголовок можно сделать, поставив тег <h4> Заголовок таблицы </h4>перед тегом <table>.
Если столбцу нужно дать заголовок, то для этого предусмотрен тег <th> Заголовок столбца </th>.
Тег <th> — то же что и тэг <td>, но его содержимое отображается полужирным шрифтом с выравниванием по центру, а содержимое <td>, как вы уже увидели, с выравниванием по левому краю, со шрифтом по умолчанию.
С тегами, касающихся таблиц, пожалуй, все.
Теперь рассмотрим параметры этих тегов.
Тег <table> имеет следующие параметры:
width=число — ширина таблицы в пикселях или в % относительно ширины окна браузера.
height=число — высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).
align = left — выравнивание таблицы по левому краю.
right — выравнивание таблицы по правому краю.
center — выравнивание таблицы по центру.
border= число — толщина рамки таблицы в пикселях.
cellspacing=число — расстояние между смежными ячейками в пикселях (по умолчанию = 2).
cellpadding=число — расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1).
bgcolor= цвет — фоновый цвет таблицы.
background=url — фоновое изображение для таблицы.
bordercolor=цвет — цвет всех линий рамки таблицы.
Рассмотрим параметры тегов <tr>, <td>, <th>:
width=число — ширина ячейки в пикселях или в % относительно ширины окна браузера (для <tr>не применяется).
height=число — высота ячейки в пикселях или в % относительно ширины окна браузера (для <tr> не применяется).
(высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееalign = left — выравнивание в ячейке по левому краю.
right — выравнивание в ячейке по правому краю.
center — выравнивание в ячейке по центру.
valign — вертикальное выравнивание содержимого ячейки.
top — выравнивание по верхнему краю ячейки.
bottom — выравнивание по нижнему краю ячейки.
middle — выравнивание по середине ячейки.
bgcolor= цве — фоновый цвет ячейки.
background=url — фоновое изображение для ячейки.
bordercolor=цвет — цвет всех линий рамки ячейки.
colspan=число — количество объединяемых ячеек по столбцам (для <tr> не применяется).
rowspan=число— количество объединяемых ячеек по строкам (для<tr> не применяется).
Давайте подробнее остановимся на параметрах colspan и rowspan.
Вы, наверное, заметили, что количество ячеек в каждой строке таблицы одно и тоже. Да, так и должно быть, но как же тогда сделать таблицу подобную на эту?
Для этого нам понадобятся параметры тега <td> colspan и rowspan..
Итак:
<table border=»1″ cellspacing=»0″ cellpadding=»0″>
<table border=»1″ cellspacing=»0″ cellpadding=»0″> |
Формируем первую строку: так как в первой строке у нас одна ячейка, и она объединяет три ячейки второй строки, то для одной ячейки первой строки укажем параметр colspan=3.
<tr> <td colspan=»3″ align=»center»>1</td> </tr>
<tr> <td colspan=»3″ align=»center»>1</td> </tr> |
Вторая строка это просто три ячейки:
<tr> <td align=»center»>2</td> <td align=»center»>3</td> <td align=»center»>4</td> </tr>
<tr> <td align=»center»>2</td> <td align=»center»>3</td> <td align=»center»>4</td> </tr> |
Третья строка: пятая ячейка третьей строки объединяет две ячейки второй строки ( 2 и 3) и две строки (третью и четвертую).
Поэтому для нее зададим colspan=2 и rowspan=2. Ячейка № 6 остается.
<tr> <td colspan=»2″ rowspan=»2″ align=»center»>5</td> <td align=»center»>6</td> </tr>
<tr> <td colspan=»2″ rowspan=»2″ align=»center»>5</td> <td align=»center»>6</td> </tr> |
Таким образом получается, что в четвертой строке должна быть одна ячейка ()
<tr> <td align=»center»>7</td> </tr> </table>
<tr> <td align=»center»>7</td> </tr> </table> |
Наша таблица построена.
Роль таблиц в WEB очень велика, поэтому рекомендую разобраться с построением таблиц.
Поупражняться можно на примерах.
Если возникнут вопросы, пишите или скачайте файл с готовыми таблицами из упражнения.
Ссылка на файл Архив 5 урока
Упражнение:
Таблица 1.
Таблица 2.
На сегодня, выпуск посвящённый HTML-тегам таблицы, я заканчиваю.
Если есть вопросы пишите на E-mail: [email protected]
Проект webformyself.com — основы самостоятельного сайтостроения
С уважением, Андрей Бернацкий.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотретьwebformyself.com
Тег HTML таблица — справочник GuruWeba
Тег <table> используется для создания HTML таблиц.
HTML таблица <table> должна содержать хотя бы одну строку <tr> и хотя бы одну ячейку <th> — ячейку-заголовок или <td> — обычную ячейку в каждой строке.
Таблица, созданная тегом <table> может быть разделена на верхний, нижний колонтитулы и основную часть с помощью тегов <thead>, <tfoot>, <tbody>.
К таблице можно добавить подпись, используя тег <caption>.
Внутри таблицу <table> можно делить не только по строкам, но и по колонкам используя теги <col> и <colgroup>.
HTML таблицы <table> не стоит использовать для верстки каркаса HTML страниц. Используйте их для структурированного отображения контента табличного формата.
Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.
Синтаксис
<table>HTML контент таблицы</table>Примеры использования таблиц <table> в HTML коде
Ниже представлены 2 варианта HTML таблиц.
Простая HTML таблица
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
HTML код простой таблицы
<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>Сложная HTML таблица
| Ячейка колонтитула 1 | Ячейка колонтитула 2 | Ячейка колонтитула 3 |
|---|---|---|
| Ячейка колонтитула 4 | Ячейка колонтитула 5 | Ячейка колонтитула 6 |
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | ||
HTML код сложной таблицы
<table>
<caption>Подпись таблицы</caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Ячейка колонтитула 1</th>
<th>Ячейка колонтитула 2</th>
<th>Ячейка колонтитула 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ячейка колонтитула 4</th>
<th>Ячейка колонтитула 5</th>
<th>Ячейка колонтитула 6</th>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td colspan="2">Ячейка 4</td>
</tr>
</tbody>
</table>Поддержка браузерами
Атрибуты
В HTML5 тег <table> не имеет атрибутов.
Устаревшие атрибуты тега table
| Атрибут | Значения | Описание |
|---|---|---|
| align | left right center justify |
Задает правило выравнивания содержимого таблицы по горизонтали. В HTML5 используйте CSS. |
| bgcolor | rgb HTML hex HTML colorname |
Фоновый цвет. В HTML5 используйте CSS. Примеры: |
| border | число | Ширина границ таблицы в пикселях. По умолчанию: 0 — границы не выводятся. В HTML5 используйте CSS. |
| cellpadding | число | Отступ от границ ячеек до их содержимого. Значение указывает количество пикселей. В HTML5 используйте CSS. |
| cellspacing | число | Отступ между границами ячеек. Значение указывает количество пикселей. В HTML5 используйте CSS. |
| frame | void above below lhs rhs vsides hsides box border |
Определяет какие внешние границы будут отображены: В HTML5 используйте CSS. |
| rules | none groups rows cols all |
Определяет какие внутренние границы будут отображены: В HTML5 используйте CSS. |
| summary | текст | Описание таблицы. |
| width | пиксели проценты |
Ширина таблицы. В HTML5 используйте CSS. |
guruweba.com
HTML5 | Таблицы
Таблицы
Последнее обновление: 08.04.2016
Для создания таблиц в html используется элемент table. Каждая таблица между тегами <table> и
</table> содержит строки, который представлены элементом tr. А каждая строка между тегами <tr> и
</tr> содержит ячейки в виде элементов td.
Создадим простейшую таблицу:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Таблицы в HTML5</title> </head> <body> <table> <tr> <td>Модель</td> <td>Компания</td> <td>Цена</td> </tr> <tr> <td>Nexus 6P</td> <td>Huawei</td> <td>49000</td> </tr> <tr> <td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td> </tr> <tr> <td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td> </tr> </table> </body> </html>
Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.
При этом в данном случае первая строка выполняет роль заголовка, а остальные три строки собственно являются содержимым таблицы. Разделения заголовков, футера и тела таблицы в html предусмотрены соответственно элементы thead, tfoot и tbody. Для их применения изменим таблицу следующим образом:
<table> <caption><b>Популярные смартфоны 2015</b></caption> <thead> <tr> <th>Модель</th> <th>Компания</th> <th>Цена</th> </tr> </thead> <tbody> <tr> <td>Nexus 6P</td> <td>Huawei</td> <td>49000</td> </tr> <tr> <td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td> </tr> <tr> <td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td> </tr> <tbody> <tfoot> <tr> <th colspan="3">Информация по состоянию на 17 марта</th> </tr> </tfoot> </table>
В элемент thead заключается строка заголовков. Для ячеек заголовок используется не элемент td, а th. Элемент
th выделяет заголовок жирным. А все остальные строки заключаются в tbody
Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по отношению к таблице.
Кроме собственно заголовоков столбцов с помощью элемента caption мы можем задать общий заголовок для таблицы.
Также стоит отметить, что футер таблицы содержит только один столбец, который раздвигается по ширине трех столбцов с помощью атрибута colspan="3".
Атрибут colspan указывает на какое количество столбцов раздвигается данная ячейка. Также с помощью атрибута rowspan мы можем раздвигать ячейку на определенное количество строк. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таблицы в HTML5</title>
<style>
td{
width: 60px;
height:60px;
border: solid 1px silver;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td colspan="2">7</td>
</tr>
</table>
</body>
</html>
metanit.com
Урок 8. Таблицы в html
Таблица в html — один из основных и первых методов вёрстки web-страниц. До того, как CSS стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.| Таблица в html состоит из строк и ячеек в этих строках. Это не опечатка, не из строк и столбцов, а именно из строк и ячеек. Считывание информации по таблице в html идёт построчно. Проще говоря смысл написанного кода такой: |
Теги, используемые для построения таблицы в html
table — обязательный тег, открывающий и закрывающий таблицу
caption — необязательный тег, обозначающий заголовок таблицы
th — необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr — обязательный тег, с которого открывается и закрывается строка
td — обязательный тег, обозначающий открытие и закрытие ячейки в строке
Пример кода простой таблицы
<html>
<head>
<title>Таблица html</title>
</head>
<body><table> <!-- обозначаем открытие таблицы -->
<tr> <!-- обозначаем начало первой строки -->
<caption>Название таблицы</caption>
<th> <!-- обозначаем название первого столбца -->
Стобец 1
</th> <!-- закрываем название первого столбца --><th> <!-- обозначаем название второго столбца -->
Стобец 2
</th> <!-- закрываем название второго столбца --></tr> <!-- конец первой строки -->
<tr> <!-- обозначаем начало второй строки -->
<td> <!-- обозначаем первую ячейку во второй строке -->
Текст в первой ячейке
</td> <!-- закрываем первую ячейку во второй строке --><td> <!-- обозначаем вторую ячейку во второй строке -->
Текст во второй ячейке
</td> <!-- закрываем вторую ячейку во второй строке -->
</tr> <!-- конец второй строки --></table> <!-- закрываем таблицу -->
</body>
</html>
В браузере отобразится
| Внимательно просмотрите таблицу и прочитайте комментарий к каждому тегу. Очень важно понять принцип построения таблицы. Во-первых, в ней все теги парные (не забывайте закрывать их), во-вторых, следует внимательно включать внутрь одних тегов другие, чтобы таблица отобразилась корректно, в-третьих, старайтесь делать отступы перед каждой строкой, ячейкой, чтобы Код был Читаемым и в случае ошибки можно было легко её найти. |
Назначение таблиц в html
Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ, ширину, границу и другие параметры, что придаст ей красивый внешний вид. Таблица — Ваш первый шаг к понимаю web-дизайна! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) — было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой…
Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
У тега table есть следующие атрибуты:
width — ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor — цвет фона ячеек таблицы
background — заливает фон таблицы рисунком
border — рамка и границы в таблице. Толщина указывается в пикселях
cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.
<table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей -->
Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th) и зададим параметр атрибуту border (граница), width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)
<html>
<head>
<title>Таблица html</title>
</head>
<body><table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей -->
<tr bgcolor="Gainsboro"> <!-- Задаём цвет ячеек для всей первой строки -->
<td>
Стобец 1
</td><td>
Стобец 2
</td>
</tr><tr>
<td>
Текст в первой ячейке первого столбца
</td><td>
Текст во второй ячейке второго столбца
</td>
</tr></table>
</body>
</html>
В результате в браузере будет выведена таблица следующего вида
frame — атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:
void — рамки нет,
above — только верхняя рамка,
below — только нижняя рамка,
hsides — только верхняя и нижняя рамки,
vsides — только левая и правая рамки,
lhs — только левая рамка,
rhs — только правая рамка,
box — все четыре части рамки.
rules — атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:
none — между ячейками нет границ,
groups — границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows — границы только между строками,
cols — границы только между стобцами,
all — отображать все границы.
Рассмотрим пример кода
<html>
<head>
<title>Таблица html</title>
</head>
<body><table border="1" width="300" frame="void" rules="rows"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей. Внешней рамки нет. Есть граница между строками -->
<tr bgcolor="Gainsboro"> <!-- Задаём цвет ячеек для всей первой строки -->
<td>
Стобец 1
</td><td>
Стобец 2
</td>
</tr><tr>
<td>
Текст в первой ячейке первого столбца
</td><td>
Текст во второй ячейке второго столбца
</td>
</tr></table>
</body>
</html>
Результат
| Поскольку атрибутом border теперь редко пользуются, то и я Вам рекомендую не привыкать к нему и следующие примеры будут без указания границ. |
Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице. Для этого есть следующие уже знакомые параметры:
align — выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing — расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример
<html>
<head>
<title>Таблица html</title>
</head>
<body><table width="400" align="center" cellspacing="5" cellpadding="10">
<!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей --><tr bgcolor="Gainsboro"> <!-- Задаём цвет ячеек для всей первой строки -->
<td>
Стобец 1
</td><td>
Стобец 2
</td>
</tr><tr>
<td>
Текст в первой ячейке первого столбца
</td><td>
Текст во второй ячейке второго столбца
</td>
</tr></table>
</body>
</html>
В браузере отобразится выравненная по центру таблица следующего вида
| Внимание! Если не указывать ширину таблицы или ячейки, не задавать отступы и выравнивания, то ширина таблицы будет строиться по содержимому — границы будут примыкать к словам, а ширина будет выбираться автоматически. |
Строки tr и ячейки td в таблицах HTML
Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.
<tr bgcolor="Gainsboro"> <!-- Задаём цвет ячеек для всей первой строки -->
<!-- цвет действителен для всех ячеек td -->
<td>
Стобец 1
</td><td>
Стобец 2
</td>
</tr>
Для тегов tr и td есть следующие
align — выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign — выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor — задает цвет строки
width — ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height — высота ячейки (все ячейки в строке примут данный параметр)
Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:
<html>
<head>
<title>Таблица html</title>
</head>
<body><table width="400" cellspacing="5" cellpadding="10">
<!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей --><tr bgcolor="Gainsboro"> <!-- Задаём цвет ячеек для всей первой строки -->
<td>
Стобец 1
</td><td>
Стобец 2
</td>
</tr><tr>
<td align="left">
Текст в первой ячейке первого столбца
</td><td align="right">
Текст во второй ячейке второго столбца
</td>
</tr></table>
</body>
</html>
Результат
С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!)
Спасибо за внимание! Надеюсь материал был полезен!
tradebenefit.ru
Таблицы HTML4
У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!
Для создания таблиц используются следующие теги:
- <TABLE> — Для обрамления самой таблицы;
- <THEAD> — Определяет заголовки элементов таблицы;
- <TBODY> — Определяет тело таблицы;
- <TFOOT> — Определяет нижнюю, завершающую часть таблицы;
- <CAPTION> — Для обрамления подписи; Атрибут ALIGN={TOP | BOTTOM} — размещение заголовка относительно таблицы (вверху или внизу таблицы)
- <COLGROUP> — Задание свойств одного или более столбцов;
- <COL> — Задание свойств одного или более столбцов;
- <TR> — Для обрамления рядов таблицы;
- <TD> — Для обрамления клеток
- <TH> — </TH> тех, что нужно показывать пожирнее, например заголовков;
- <TD> — </TD> обычных.
Далее представлены ранее использовавшиеся атрибуты формирования таблиц html.
Ознакомиться с современными методами форматирования таблиц в соответствии с современным стандартом HTML5 можно на странице Таблицы HTML
Атрибуты TABLE:
| имя атрибута | возможные значения | смысл | примечания |
| ALIGN | LEFT, RIGHT | Определяет горизонтальное положение таблицы. Задание этого атрибута фактически определяет плавающую таблицу, которую может обтекать текст. При использовании этого атрибута по окончании таблицы должна следовать команда BR. | LEFT — Таблица прижимается влево (используется по умолчанию). RIGHT – Таблица прижимается вправо. Текст в клетках прижимается к влево. |
| VALIGN | TOP, MIDDLE, BOTTOM | Определяет вертикальное расположение текста в таблице | |
| WIDTH | целое | Определяет ширину таблицы в пикселах или в процентах от ширины экрана. Для задания n в процентах используется знак (%) процента. | броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце |
| HEIGHT | целое | Определяет высоту таблицы в пикселах или в процентах от высоты экрана. Позволяет при необходимости растягивать таблицу на весь экран. | броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке |
| BACKGROUND | URL | Задает в качестве фона графический файл. | |
| BGCOLOR | Задает цвет фона. | ||
| BORDER | целое | Ширина рамки в пикселах | По умолчанию рамка не рисуется |
| BORDER COLOR | Задание цвета рамки | ||
| BORDER COLORLIGHT | Задание цвета для рамки с тенью (псевдо трехмерная графика) | Используется вместе с атрибутами BORDERCOLORDARK и BORDER | |
| BORDER COLORDARK | Задание цвета для рамки с тенью (псевдо трехмерная графика | ||
| CELLPADDING | целое | Задает расстояние в пикселах между границей клетки и ее содержимым. | |
| CELLSPACING | целое | Задает расстояние в пикселах между внешней рамкой таблицы и ее клетками внутри таблицы. | |
| COLS | целое | Число столбцов в таблице. Данный атрибут ускоряет вывод таблицы, что особенно заметно для больших таблиц | |
| FRAME | VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER | Определяет метод отрисовки рамки | VOID — Убрать наружную часть рамки. ABOVE — Показывает верхнюю границу таблицы. BELOW — Показывает нижнюю границу таблицы. HSIDES — Показывает верхнюю и нижнюю границу таблицы. LHS — Показывает левую границу таблицы. RHS — Показывает правую границу таблицы. VSIDES — Показывает левую и правую границу таблицы. BOX — Показывает полную рамку таблицы. BORDER — Показывает полную рамку таблицы. |
| RULES | NONE, GROUPS, ROWS, COLS, ALL | Определяет как будут показаны разделительные линии ( внутренние границы ) таблицы | NONE — Устраняет все границы внутри таблицы. GROUPS — Показывает горизонтальные границы между всеми группами таблицы. GROUPS определены элементами THEAD, TBODY, TFOOT, и COLGROUP ROWS – Показывает горизонтальные границы между всеми рядами таблицы. COLS – Показывает вертикальные границы между всеми колонками таблицы. ALL — Показывает все границы. |
Атрибуты TD, TH:
| имя атрибута | возможные значения | смысл | примечания |
| NOWRAP | подавляет перенос слов | эквивалентно использованию непрерывных пробелов ( ) вместо обычных пробелов в пределах содержимого ячейки | |
| ROWSPAN | целое | число строк, перекрываемых ячейкой | по умолчанию 1 |
| COLSPAN | целое | число столбцов, перекрываемых ячейкой | по умолчанию 1 |
| COLSPEC | ширина колонок в символах или в процентах | например COLSPEC=»20%» | |
| ALIGN | LEFT, CENTER, RIGHT, JUSTIFY, CHAR | горизонтальное выравнивание данных в ячейке | по умолчанию LEFT или атрибут ALIGN во включающем элементе TR, Если задано ALIGN=”CHAR”, то задается свойство CHAR=”.”, с указанием относительно какого символа выравнивать. Свойство CHAROFF=Length заставляет сдвигать ячейки, не содержащие заданного символа |
| VALIGN | TOP, MIDDLE, BOTTOM, BASELINE | вертикальное выравнивание данных в ячейке | перекрывается атрибутом VALIGN во включающем элементе TR |
| WIDTH | целое | ширина ячейки в пикселях | броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце |
| HEIGHT | целое | высота ячейки в пикселях | броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке |
| BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK | Аналогично атрибутам TABLE | ||
Атрибуты TR только ALIGN, VALIGN – аналогично для TD, TH
Пример:
Потребление пива сотрудниками вневедомственной охраны пивзавода
| Ф.И.О | литров | сорт |
|---|---|---|
| Иванов Иван Иванович | 133 | Хейнекен |
<TABLE> <CAPTION>потребление пива сотрудниками вневедомственной охраны пивзавода</CAPTION> <TR><TH>Ф.И.О</TH> <TH>литров</TH> <TH>сорт</TH> </TR> <TR><TD> Иванов Иван Иванович </TD> <TD ALIGN=CENTER >133</TD> <TD>Хейнекен</TD> </TR> </TABLE>
Атрибуты <TABLE>:
BORDER=2 — Ширина рамки в пикселях
ALIGN=CENTER
CELLPADDING=5 – расстояние между содержимым ячеек и границей таблицы
CELLSPACING=5 – расстояние между ячейками таблицы
WIDTH=»50%» — ширина таблицы в пикселях или относительно размера окна просмотрщика в процентах
COLS=4 –Количество столбов в таблице
Клетка может занимать несколько строк или столбцов. Для этого используются атрибуты ROWSPAN или COLSPAN в теге <TH> или <TD>. Для задания ширины таблицы или колонки используется атрибут WIDTH, который может быть задан в процентах или пикселях. Вот пример:
образец таблицы
| средний | повышенная пушистость | ||
| рост | вес | ||
| самцы | 29см | 6.2кГ | 40% |
| самки | 25см | 4.9кГ | 43% |
<CENTER><TABLE BORDER=2 ALIGN=CENTER CELLPADDING=5 > <CAPTION><I>образец таблицы</I></CAPTION> <TR><TH ROWSPAN="2"></TH> <TH COLSPAN="2">средний</TH> <TH ROWSPAN="2">повышенная <BR>пушистость</TH> </TR> <TR><TH>рост</TH> <TH>вес</TH> </TR> <TR><TH>самцы</TH> <TD>29см</TD> <TD>6.2кГ</TD> <TD>40%</TD> </TR> </TABLE></CENTER>
<COL>
<COL ALIGN= {CENTER | LEFT | RIGHT} SPAN= n >
Задание свойств одного или более столбцов таблицы. Используется совместно с командой COLGROUP.Параметры, определяемые командой COL, «сильнее» параметров команды COLGROUP.
<COLGROUP>
Свойства, заданные командой COLGROUP, переопределяются комндой COL. Эта команда влияет на отрисовку линий, определяемых атрибутом RULES= команды TABLE.
<COLGROUP ALIGN={CENTER | LEFT | RIGHT}.SPAN= n — Задание числа последовательных столбцов.>
Пример :
<TABLE> <COLGROUP ALIGN=RIGHT><COLGROUP SPAN=2 ALIGN=LEFT> <TBODY> <TR> <TD>This column is in the first group and is right-aligned</TD> <TD>This column is in the second group and is left-aligned</TD> <TD>This column is in the second group and is left-aligned</TD> </TR> </TABLE>
Пример :
<TABLE> <COLGROUP><COL ALIGN=RIGHT><COL ALIGN=LEFT> <COLGROUP><COL ALIGN=CENTER> <TBODY> <TR> <TD>This is the first column in the group and is right-aligned.</TD> <TD>This is the second column in the group and is left-aligned.</TD> <TD>This column is in a new group and is centered.</TD> </TR> </TABLE>
Практически все атрибуты табличных тегов считаются устаревшими.
Таблицы HTML – валидное оформление таблиц по стандарту HTML5.
Читать дальше: Фреймы в HTML
htmlweb.ru