Урок 9. Таблицы в HTML
Таблицы в HTML.
С обновлением языка HTML менялась структура языка появилось множество новых функций, что-то устарело.
Таблицы в данное время остаются не маловажным элементом в создании и верстке сайта.
Для добавления таблицы используется тег <table>. C помощью тега <tr> (table row — строка таблицы) можно добавить строку в таблицу, а для разделения строк на столбцы используется тег <td> (table data — данные таблицы).
<table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table>
Содержимое таблицы располагается между тегами <td>, помимо текста в таблицу можно вставить изображения, списки, другие таблицы и прочее.
Для создания «заголовков» в таблице используется тег <th>, текст в таблице будет выделен жирным и выровнен по центру. Других различий между тегом <td> и тегом <th> нет, поэтому допускается использование <th> вместо <td>.
<table> <tr> <th>Наименование 1</th> <th>Наименование 2</th> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table>
Заголовок таблицы
Таблице можно назначить заголовок при помощи тега <caption>, тег <caption> использует атрибут align который имеет несколько значений для изменения положения заголовка:
- right — выравнивание заголовка по правому краю.
- left — выравнивание заголовка по левому краю.
- top — выравнивание заголовка вверху и по центру таблицы.
- bottom — заголовок располагается внизу таблицы и будет выравнен по центру.
<table> <caption align="bottom">Пример таблицы</caption> <tr> <th>Наименование 1</th> <th>Наименование 2</th> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table>
Выравнивание таблицы и рамка таблицы
Для заключения таблицы в рамку используйте атрибут border, чтобы выровнять таблицу по определенному краю используйте изученный ранееатрибут align
<table border="1" align="center"> <caption align="bottom">Пример таблицы</caption> <tr> <th>Наименование 1</th> <th>Наименование 2</th> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table>
Объединение строк и столбцов таблицы
Для объединения двух и более столбцов в одну ячейку используйте атрибут colspan, а для объединения двух и более строк используется атрибут rowspan.
<table border="1" align="center"> <caption align="bottom">Пример таблицы</caption> <tr> <td rowspan="2">Ячейка 1</td> <th colspan="2">Ячейка 2</th> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table>
Задний фон ячейки
Также в таблице можно выделить задний фон ячейки определенным цветом при помощи атрибута bgcolor
<table border="1" align="center"> <caption align="bottom">Пример таблицы</caption> <tr> <td rowspan="2">Ячейка 1</td> <th colspan="2">Ячейка 2</th> </tr> <tr> <td bgcolor="yellow">Ячейка 3</td> <td bgcolor="blue">Ячейка 4</td> </tr> </table>
Ширина таблицы, выравнивание содержимого, увеличение отступа от содержимого
Если вы хотите чтобы ваша таблица была определенного размера по ширине можете использовать атрибут width.
По умолчанию содержимое ячеек прижато к левому краю, если использовать атрибут align в теге <tr> все содержимое строки будет выровнено по заданному краю.
Также для увеличения отступа от содержимого внутри ячейки используйтеатрибут cellpadding
<table border="1" align="center" width="250" cellpadding="5"> <caption align="bottom">Пример таблицы</caption> <tr> <td rowspan="2">Ячейка 1</td> <th colspan="2">Ячейка 2</th> </tr> <tr align="center"> <td bgcolor="yellow">Ячейка 3</td> <td bgcolor="blue">Ячейка 4</td> </tr> </table>
Многие атрибуты для оформления таблицы использованные выше устарели и используются сейчас в Сss, но их можно встретить на устаревших ресурсах, поэтому стоить уделить немного внимания на их изучение.