HTML: Таблицы | Урок 7
2.01.2012
Раздел: HTML Уроки
Настало время рассмотреть очень весомый элемент в HTML - Таблицы. Безусловно, это
один из самых значимых моментов в интернет-строении. И не сразу лёгок для понимания.. Но я постараюсь объяснить всё как можно проще, что бы Вам было понятнее и легче его освоить.
Таблицы в HTML инициализируются тегом table. Для начала, важно понять одну простую схему - с чего состоит таблица. А состоит она из столбцов и строк. Столбец обозначается тегом td, а строка tr. Один очень важный
момент - таблицы отличаются всех других элементов HTML тем, что все под-теги располагаются внутри тега table, по аналогии body. Внутри body могут размещаться все другие теги, точно так же и в таблице.
Пример:
Итак, таблицы состоят из столбцов и строк, построим элементарную таблицу, состоящую из 1 столбца и 2 строк, выглядеть это будет так:
<tr>
<td>Содержимое первого столбца первой строки</td>
</tr>
<tr>
<td>Содержимое первого столбца второй строки</td>
</tr>
Как Вы заметили, сначала прописывается строка, а далее эту строку можно разделить на необходимое колличество столбцов.
С этим разобрались, идём дальше.. th - Тег являтеся аналогией тега td, так же используется внутри строки т.е. tr. Отличается от td тем, что является заголовком ячейки, по умолчанию выделяется полужирным шрифтом и имеет выравнивание по центру.
Содержание td по умолчанию имеет выравнивание по левому краю, если же таблица имеет вертикальный вид, то содержимое выравнивается по центру. Задать необходимое выравнивание можно с помощью тега align, стандартного в HTML.
Делается это так:
<table>
<tr>
<td align="right">Содержимое первого столбца первой строки относительно правого
края.</td>
</tr>
<tr>
<td align="center">Содержимое первого столбца второй строки выравнено по
центру</td>
</tr>
</table>
Выравнивать можно не только столбцы и строки, но и всю таблицу, задав атрибуту align в теге table соответствующий параметр. Размер таблицы задаётся с помощью, уже знакомых нам атрибутов, height и width. В данные атрибуты может быть задан параметр в % а не в пикселях..
Пример:
<table width="100%">
<tr>
<td align="right">Содержимое первого столбца первой строки относительно правого края.</td>
</tr>
<tr>
<td align="center">Содержимое первого столбца второй строки выравнено по центру</td>
</tr>
</table>
В вышеприведённом примере, таблица будет растянута на весь экран. По аналогии данные атрибуты используются в tr, td и th, им Вы так же можете задать ширину и высоту.
Теперь рассмотрим такой элемент - Заголовок Таблицы, он же caption,
имеет всего один атрибут - align, который может принимать значение top (заголовок над таблицей) или bottom (заголовок под таблицей). Пример, думаю приводить не стоит, здесь итак всё ясно...
Атрибут cellspacing определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию значение принимается равным двум. Традиционно, смежные ячейки таблицы имеют общую границу. В HTML-таблицах по умолчанию между ними оставляется место. При задании данному атрибуту значение 0, рамки смежных ячеек сольются и создадут впечатление единой сетки.
cellpadding определяет размер отступа между рамкой ячейки и данными внутри ячейки. По умолчанию значение принимается равным единице. Установка параметра cellpadding равным нулю может привести к тому, что некоторые части текста ячейки могут касаться ее рамки, это будет выглядеть не красиво.
Атрибуты очень похожи между собой, как по написанию, так и по действию. Я не думаю что нужно приводить пример, Вы уже сами должны понимать где и что нужно прописать.
Кстати, чуть не забыл про border, в таблице вы так же можете его испоьзовать, для задания рамки, по умолчанию атрибут равен 0 px, т.е. рамка не отображается.
Теперь ещё один важный момент в таблице-строении HTML. Это объединение ячеек. Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега td. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, td colspan="3" заменяет три ячейки, поэтому в следующей строке должно быть три тега td или конструкция вида
<td colspan="2"...</td>
<td>...</td>
.
Если число ячеек в каждой строке не будет совпадать, появятся пустые ячейки. Будьте внимательны, здесь довольно, легко ошибиться с написанием..
Привожу правильный пример объединения ячеек:
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<td rowspan="2">Браузер</td>
<th colspan="2">Internet Explorer</th>
<th colspan="3">Opera</th>
<th colspan="2">Firefox</th>
</tr>
<tr>
<th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
</tr>
<tr align="center">
<td>Поддерживается</td>
<td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
</tr>
</table>
В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.
Вот... вроде-бы изложил всё самое основное.. Если что-то посчитаю нужным ещё, то обязательно допишу. Урок получился довольно массивным, но я с этим ничего не могу поделать, так как тема таблиц в HTML довольно крупна. Оставайтесь на связи, подписывайтесь на RSS, и ждите новых уроков
один из самых значимых моментов в интернет-строении. И не сразу лёгок для понимания.. Но я постараюсь объяснить всё как можно проще, что бы Вам было понятнее и легче его освоить.
Таблицы в HTML инициализируются тегом table. Для начала, важно понять одну простую схему - с чего состоит таблица. А состоит она из столбцов и строк. Столбец обозначается тегом td, а строка tr. Один очень важный
момент - таблицы отличаются всех других элементов HTML тем, что все под-теги располагаются внутри тега table, по аналогии body. Внутри body могут размещаться все другие теги, точно так же и в таблице.
Пример:
<table>
Здесь теги, которые свойственны для таблицы..
</table>
Здесь теги, которые свойственны для таблицы..
</table>
Итак, таблицы состоят из столбцов и строк, построим элементарную таблицу, состоящую из 1 столбца и 2 строк, выглядеть это будет так:
<tr>
<td>Содержимое первого столбца первой строки</td>
</tr>
<tr>
<td>Содержимое первого столбца второй строки</td>
</tr>
Как Вы заметили, сначала прописывается строка, а далее эту строку можно разделить на необходимое колличество столбцов.
С этим разобрались, идём дальше.. th - Тег являтеся аналогией тега td, так же используется внутри строки т.е. tr. Отличается от td тем, что является заголовком ячейки, по умолчанию выделяется полужирным шрифтом и имеет выравнивание по центру.
Содержание td по умолчанию имеет выравнивание по левому краю, если же таблица имеет вертикальный вид, то содержимое выравнивается по центру. Задать необходимое выравнивание можно с помощью тега align, стандартного в HTML.
Делается это так:
<table>
<tr>
<td align="right">Содержимое первого столбца первой строки относительно правого
края.</td>
</tr>
<tr>
<td align="center">Содержимое первого столбца второй строки выравнено по
центру</td>
</tr>
</table>
Выравнивать можно не только столбцы и строки, но и всю таблицу, задав атрибуту align в теге table соответствующий параметр. Размер таблицы задаётся с помощью, уже знакомых нам атрибутов, height и width. В данные атрибуты может быть задан параметр в % а не в пикселях..
Пример:
<table width="100%">
<tr>
<td align="right">Содержимое первого столбца первой строки относительно правого края.</td>
</tr>
<tr>
<td align="center">Содержимое первого столбца второй строки выравнено по центру</td>
</tr>
</table>
В вышеприведённом примере, таблица будет растянута на весь экран. По аналогии данные атрибуты используются в tr, td и th, им Вы так же можете задать ширину и высоту.
Теперь рассмотрим такой элемент - Заголовок Таблицы, он же caption,
имеет всего один атрибут - align, который может принимать значение top (заголовок над таблицей) или bottom (заголовок под таблицей). Пример, думаю приводить не стоит, здесь итак всё ясно...
Атрибут cellspacing определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию значение принимается равным двум. Традиционно, смежные ячейки таблицы имеют общую границу. В HTML-таблицах по умолчанию между ними оставляется место. При задании данному атрибуту значение 0, рамки смежных ячеек сольются и создадут впечатление единой сетки.
cellpadding определяет размер отступа между рамкой ячейки и данными внутри ячейки. По умолчанию значение принимается равным единице. Установка параметра cellpadding равным нулю может привести к тому, что некоторые части текста ячейки могут касаться ее рамки, это будет выглядеть не красиво.
Атрибуты очень похожи между собой, как по написанию, так и по действию. Я не думаю что нужно приводить пример, Вы уже сами должны понимать где и что нужно прописать.
Кстати, чуть не забыл про border, в таблице вы так же можете его испоьзовать, для задания рамки, по умолчанию атрибут равен 0 px, т.е. рамка не отображается.
Теперь ещё один важный момент в таблице-строении HTML. Это объединение ячеек. Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега td. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, td colspan="3" заменяет три ячейки, поэтому в следующей строке должно быть три тега td или конструкция вида
<td colspan="2"...</td>
<td>...</td>
Если число ячеек в каждой строке не будет совпадать, появятся пустые ячейки. Будьте внимательны, здесь довольно, легко ошибиться с написанием..
Привожу правильный пример объединения ячеек:
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<td rowspan="2">Браузер</td>
<th colspan="2">Internet Explorer</th>
<th colspan="3">Opera</th>
<th colspan="2">Firefox</th>
</tr>
<tr>
<th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
</tr>
<tr align="center">
<td>Поддерживается</td>
<td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
</tr>
</table>
В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.
Вот... вроде-бы изложил всё самое основное.. Если что-то посчитаю нужным ещё, то обязательно допишу. Урок получился довольно массивным, но я с этим ничего не могу поделать, так как тема таблиц в HTML довольно крупна. Оставайтесь на связи, подписывайтесь на RSS, и ждите новых уроков
3109
