Создание таблицы в HTML

Добавление таблицы

 

В HTML для добавления таблицы используется парный тег <table> </table>. Таблицы состоят из строчек и колонок. Для этого используются парные теги <tr> и <td>.

 

Рамка таблицы

Ширину рамки таблицы можно настраивать аттрибутом border. Например <table border=’1′> означает что у таблицы будет ширина рамки равная 1 пиксел.

Пример таблицы из двух строк и двух столбцов:

код html

<table border=’1′>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>

Результат:

Первая ячейка Вторая ячейка
Первая ячейка Вторая ячейка

 

 

Объединение ячеек

Иногда бывает нужно объединять ячейки таблицы. Для этого используется аттрибуты для ячейки:

colspan — объединение ячеек в строке;

rowspan — объединение ячеек в колонке.

Пример:

html код:

< table border=’1′ >
< tr>
< td colspan=’2′>Первая и вторая ячейки< /td>< td>Третья ячейка< /td>
< /tr>
< tr>
< td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
< /tr>
< /table>

результат в браузере:

Первая и вторая ячейки Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка

 

Пример объединения по вертикали:

код в html

< table border=’1 cellpadding=’10’>
< tr>
< td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td rowspan=»2″>Третья и шестая ячейки< /td>
< /tr>
< tr>
< td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>
< /tr>
< /table>

в результате в браузере получим

Первая ячейка Вторая ячейка Третья и шестая ячейки
Четвертая ячейка Пятая ячейка

Добавление заголовка в таблицу

Иногда бывает, нужно добавить заголовка к таблице. Это можно сделать  парным тегом < caption>

пример

код html

<table border=’1′>

<caption> Таблица Html </caption>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>

</table>

в результате получим

Таблица Html
Первая ячейка Вторая ячейка

Задание размера таблицы

Обычно таблица занимает столько места , чтоб элементы ячейки умещались в ячейки. Но можно задать фиксированные размеры таблицы с помощью аттрибутов

width — ширина таблицы, столбца, ячейки;

height — высота таблицы, строки, ячейки.
Размеры можно задать либо в пикселах, либо в процентах.

Пример кода html

< table border=’1′ height=’60px’>
< tr>
< td>Первая ячейка< /td>< td width=’45%’>Вторая ячейка< /td>< td>Третья ячейка< /td>
< /tr>
< tr>
< td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
< /tr>
< /table>

Результат в браузере

Первая ячейка Вторая ячейка Третья ячейка
Четвертая ячейка Пятая ячейка Шестая ячейка

На этом закончим тему о таблицах в html

Язык HTML. Содержание

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *