Рассмотрим вышеизложенное на примерах различного
Рассмотрим вышеизложенное на примерах различного вида таблиц.
<html> <body>
<p> Каждая таблица начинается с тега table. Каждая строка таблицы начинается с тега tr. Каждый элемент данных таблицы начинается с тега td. </p>
<h1>Это пример простейшей таблицы, содержащей одну строку и одну ячейку.</h1> <table border="1"> <tr> <td>Одна строка и одна ячейка</td> </tr> </table>
<h1>Одна строка и три столбца:</h1> <table border="1"> <tr> <td> столбец 1</td> <td> столбец 2</td> <td> столбец 3</td> </tr> </table>
<h1>Две строки и три столбца:</h1> <table border="1"> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> </table>
</body> </html>
<h1>Рамка таблицы</h1>
<html> <body> <h1>Обычная рамка:</h1> <table border="1"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая </td> <td>строка</td> </tr> </table>
<h1>Толстая рамка:</h1> <table border="10"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая </td> <td>строка</td> </tr> </table>
</body> </html>
<table border="1"> <tr> <td>строка 1, ячейка 1</td> <td>строка 1, ячейка 2</td> </tr> <tr> <td>строка 2, ячейка 1</td> <td>строка 2, ячейка 2</td> </tr> </table>
Пример выполнения данного HTML-кода
Для тега table определены следующие аттрибуты.
- align - определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left.
- valign - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
- border - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
- cellpadding - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
- cellspacing - определяет расстояние (в пикселах) между границами соседних ячеек.
- width - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
- height - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
- bgcolor - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
- background - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо. Если необходимо сделать ячейку таблицы пустой, то разместите в ней неразрывный пробел
Такие элементы как <thead>,<tbody> и <tfoot> используются редко в связи с тем, что не все браузеры их поддерживают.
Для тегов <td> и <th> очень полезными являются атрибуты colspan и rowspan. Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным. Продемонстрируем на примере.
<html> <body>
<h4>Правильное применение colspan:</h4> <table border="1"> <tr> <td colspan="2">100</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
<h4>Неправильное применение colspan:</h4> <table border="1"> <tr> <td colspan="2">100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
<h4>Правильное применение rowspan:</h4> <table border="1"> <tr> <td rowspan="2">100</td> <td>200</td> <td>300</td> </tr> <tr> <td>500</td> <td>600</td> </tr> </table>
<h4>Неправильное применение rowspan:</h4> <table border="1"> <tr> <td rowspan="2">100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
Пример выполнения данного HTML-кода