Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Код простой таблицы html:
<table border="1">
<tr>
<td>Ячейка 1</td>
</tr>
</table> |
Результат:
Значения:
*Теги <table></table> – объявляют о создании HTML таблицы.
*border="1" – устанавливает границу HTML таблицы и ее ячеек в 1 пиксел. Если атрибут border отсутствует или его значение равно 0 – границ не будет.
*Теги <tr> </tr> – определяют табличный ряд.
*Теги <td> </td> – определяют ячейку HTML таблицы.
Пример таблицы с четырьмя ячейками:
<table border="1">
<tr>
<td>ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
<tr>
</table> |
Результат:
| ячейка 1, первый ряд |
ячейка 2, первый ряд |
| ячейка 1, второй ряд |
ячейка 2, второй ряд |
|
HTML таблица может иметь множество рядов и ячеек, а ячейка, в свою очередь, может содержать внутри себя другую таблицу.
Cellpadding или пространство внутри ячеек таблиц:
<table border="1" cellspacing="0"
cellpadding="8" style="background-color:#cc0000; color:#ffffff">
<tr>
<td>ячейка 1, первый ряд</td>
<td> </td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table> |
Результат:
| ячейка 1, первый ряд |
|
| ячейка 1, второй ряд |
ячейка 2, второй ряд |
|
Значения:
*cellspacing="0" – определяет расстояние между ячейками таблиц, а также между границами ячеек и границей таблицы.
*cellpadding="8" – пространство между границей ячейки и её содержимым.
*style="" – линейное включение CSS.
*background-color: – определяет цвет фона.
*color: – определяет цвет текста.
Размер таблицы.
Высота и ширина таблицы:
<table border="1" cellspacing="0" cellpadding="15" width="95%" height="90">
<tr>
<td>ячейка 1, первый ряд</td>
<td style="background-color:#ffccbb">ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table> |
Результат:
| ячейка 1, первый ряд |
ячейка 2, первый ряд |
| ячейка 1, второй ряд |
ячейка 2, второй ряд |
|
Значения:
*width – в данном случае была определена ширина таблицы в процентах.
*height – определяет высоту таблицы.
Выравнивание внутри таблицы.
Текст слева, по центру, и справа ячеек таблицы
<table border="1" cellspacing="0" cellpadding="17" width="500">
<tr height="60">
<td align="left">ячейка 1</td>
<td align="center">ячейка 2</td>
<td align="right">ячейка 3</td>
</tr>
</table> |
Результат:
| ячейка 1 |
ячейка 2 |
ячейка 3 |
|
Выравнивание в таблице.
Текст вверху, по центру, и внизу ячеек таблицы:
<table border="1" cellspacing="0" cellpadding="17" width="500">
<tr height="80">
<td valign="top">ячейка 1</td>
<td valign="middle">ячейка 2</td>
<td valign="bottom">ячейка 3</td>
</tr>
</table> |
Результат:
| ячейка 1 |
ячейка 2 |
ячейка 3 |
|
|
