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

Таблицы - очень важная часть HTML и при создании любого сайта без таблиц не обойтись. Использование таблиц облегчает возможность придавать сайту нужный вид, так как мы можем свободно регулировать ширину и высоту таблицы.

В этом уроке html давайте займемся основами создания таблиц и какие при этом используются теги. Начнем с самого главного тега, отвечающего за создание таблицы - парного тега <table>.

Пример:

<table>

...

</table>

Таблицу мы создали, но таблица - это совокупность строк и столбцов, поэтому внутри таблицы нам необходимо создать строки и столбцы. Без них мы в таблицу ничего не сможем записать.

Строка в таблице создается с помощью парного тега <tr>, а столбец - с помощью парного тега <td>.

Пример:

<table>

<tr>

<td></td>

</tr>

</table>

Теперь можно сказать, что таблицу создали и в нее можно что-то записать. Давайте создадим в таблице наш первый абзац.

Пример:

<table>

<tr>

<td><p>Первый абзац в таблице</p></td>

</tr>

</table>


Просмотрим нашу запись в браузере. Мы видим только надпись Первый абзац в таблице, а самой таблицы не видно. Для того, что бы можно было видеть таблицу, необходимо прописать соответствующие атрибуты.

Первый атрибут таблиц - это атрибут border , который отвечает за рамку. По умолчанию в значении атрибута стоит "0" (рамка не видна). Если мы хотим увидеть рамку, мы должны поставить значение отличное от нуля, например "1"

Пример:

<table border="1">

<tr>

<td><p>Первый абзац в таблице</p></td>

</tr>

</table>


Проверяем в браузере и видим, что появилась рамка. В нашем примере созданная таблица состоит из одной строки и одного столбца. По умолчанию выровнена по левому краю и имеет такую же ширину как и ширина абзаца.

Теперь давайте увеличим ширину нашей таблицы, применив еще один атрибут - это атрибут width, который отвечает за ширину объекта. Ширину можно задавать и в пикселях и в процентах. Если мы задаем ширину таблицы в пикселях, то в значении атрибута просто пишем необходимое число.

Пример:

<table border="1" width="600">

<tr>

<td><p>Первый абзац в таблице</p></td>

</tr>

</table>

 

Ширина нашей таблицы стала 600 пикселей. Выравниваем по центру, используя уже известный нам атрибут align, отвечающий за выравнивание.

Пример:

<table border="1" width="600" align="center">

<tr>

<td><p>Первый абзац в таблице</p></td>

</tr>

</table>

Теперь давайте в нашей строке к одному столбцу добавим еще пару столбцов. Для этого нам необходимо прописать еще пару тегов <td>. Для каждого столбца - один тег.

Пример:

<table border="1" width="600" align="center">

<tr>

<td><p>Первый столбец таблицы</p></td>

<td><p>Второй столбец таблицы</p></td>

<td><p>Третий столбец таблицы</p></td>

</tr>

</table>

Если мы хотим задать каждому столбцу определенную ширину - прописываем каждому тегу <td> атрибут width с указанием соответствующей ширины.

Пример:

<table border="1" width="600" align="center">

<tr>

<td width="200"><p>Первый столбец таблицы</p></td>

<td width="200"><p>Второй столбец таблицы</p></td>

<td width="200"><p>Третий столбец таблицы</p></td>

</tr>

</table>


Теперь каждый столбец данной строки имеет одинаковый размер.

Далее добавим в нашей таблице еще одну строку, применив, соответственно еще один тег <tr>. И так же пропишем в эту строку три столбца.

Пример:

<table border="1" width="600" align="center">

<tr>

<td width="200"><p>Первый столбец таблицы</p></td>

<td width="200"><p>Второй столбец таблицы</p></td>

<td width="200"><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td width="200"><p>Первый столбец второй строки</p></td>

<td width="200"><p>Второй столбец второй строки </p></td>

<td width="200"><p>Третий столбец второй строки </p></td>

</tr>

</table>

Идем дальше в создании таблицы. Для изменения цвета рамки применяем атрибут bordercolor, отвечающий за цвет рамки. В значении атрибута прописываем тот цвет, который нам требуется.

Пример:

<table border="1" width="600" align="center" bordercolor="red">

<tr>

<td width="200"><p>Первый столбец таблицы</p></td>

<td width="200"><p>Второй столбец таблицы</p></td>

<td width="200"><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td width="200"><p>Первый столбец второй строки</p></td>

<td width="200"><p>Второй столбец второй строки </p></td>

<td width="200"><p>Третий столбец второй строки </p></td>

</tr>

</table>


Рамка стала красного цвета.

Теперь сделаем отступы внутри каждой ячейки таблицы (текст внутри ячейки прижат к рамке). Делается это с помощью атрибута cellpadding ( cell - это ячейка, padding - внутренний отступ). В значении атрибута прописываем расстояние в пикселях, которое должно быть между текстом и рамкой ячейки.

Пример:

<table border="1" width="600" align="center" bordercolor="red" cellpadding="10">

<tr>

<td width="200"><p>Первый столбец таблицы</p></td>

<td width="200"><p>Второй столбец таблицы</p></td>

<td width="200"><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td width="200"><p>Первый столбец второй строки</p></td>

<td width="200"><p>Второй столбец второй строки </p></td>

<td width="200"><p>Третий столбец второй строки </p></td>

</tr>

</table>

А как бы нам текст в каждой ячейке первой строки выровнять по центру (по умолчанию он прижат к левому краю). Для этого к тегу первой строки добавляем атрибут align со значением "center".

Пример:

<table border="1" width="600" align="center" bordercolor="red" cellpadding="10">

<tr align="center">

<td width="200"><p>Первый столбец таблицы</p></td>

<td width="200"><p>Второй столбец таблицы</p></td>

<td width="200"><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td width="200"><p>Первый столбец второй строки</p></td>

<td width="200"><p>Второй столбец второй строки </p></td>

<td width="200"><p>Третий столбец второй строки </p></td>

</tr>

</table>

 

Текст в каждой ячейке первой строки выровнялся по центру.

Давайте теперь попробуем добавить в нашу созданную таблицу третью строку, но с одной ячейкой, шириной как все три ячейки верхних строк.

Пример:

<table border="1" width="600" align="center" bordercolor="red" cellpadding="10">

<tr align="center">

<td width="200"><p>Первый столбец таблицы</p></td>

<td width="200"><p>Второй столбец таблицы</p></td>

<td width="200"><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td width="200"><p>Первый столбец второй строки</p></td>

<td width="200"><p>Второй столбец второй строки </p></td>

<td width="200"><p>Третий столбец второй строки </p></td>

</tr>

<tr>

<td>Третья строка</td>

</tr>

</table>


Проверяем в браузере. У нас появилась третья строка, но ширина ячейки в этой строке такая же как и всех ячеек. Если применить атрибут width и проставить нужное значение - то это нам ничего не дает (можете проверить). Для того что-бы ячейка третьей строки заняла ширину нескольких ячеек необходимо применить специальный атрибут colspan (объеденить несколько ячеек), а в значении атрибута указать количество объединяемых ячеек (две или три).

Пример:

<table border="1" width="600" align="center" bordercolor="red" cellpadding="10">

<tr align="center">

<td width="200"><p>Первый столбец таблицы</p></td>

<td width="200"><p>Второй столбец таблицы</p></td>

<td width="200"><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td width="200"><p>Первый столбец второй строки</p></td>

<td width="200"><p>Второй столбец второй строки </p></td>

<td width="200"><p>Третий столбец второй строки </p></td>

</tr>

<tr>

<td colspan="3">Третья строка</td>

</tr>

</table>

Вот так работает атрибут colspan.

А если нам необходимо объединить две ячейки одного столбца в одну. Первую ячейку первой строки объединим с первой ячейкой второй строки. Для этого есть атрибут rowspan. Вписываем в первую ячейку первой строки атрибут rowspan в значении которого пишем то количество ячеек, сколько мы хотим объеденить.

Пример:

<table border="1" width="600" align="center" bordercolor="red" cellpadding="10">

<tr align="center">

<td rowspan="2" width="200"><p>Первый столбец таблицы</p></td>

<td width="200"><p>Второй столбец таблицы</p></td>

<td width="200"><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td width="200"><p>Первый столбец второй строки</p></td>

<td width="200"><p>Второй столбец второй строки </p></td>

<td width="200"><p>Третий столбец второй строки </p></td>

</tr>

<tr>

<td colspan="3">Третья строка</td>

</tr>

</table>


Проверяем в браузере. Что-то не то. Во второй строке у нас появилась лишняя ячейка. Не беда. Нам всего лишь надо удалить одну ячейку из второй строки.

Пример:

<table border="1" width="600" align="center" bordercolor="red" cellpadding="10">

<tr align="center">

<td rowspan="2" width="200"><p>Первый столбец таблицы</p></td>

<td width="200"><p>Второй столбец таблицы</p></td>

<td width="200"><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td width="200"><p>Первый столбец второй строки</p></td>

<td width="200"><p>Второй столбец второй строки </p></td>

</tr>

<tr>

<td colspan="3">Третья строка</td>

</tr>

</table>

Готово. Теперь у нас все выглядит как мы и хотели.

Вот так атрибут rowspan объединяет ячейки по вертикали.

Еще мы можем в нашу созданную таблицу вставить еще одну. Это может нам пригодиться в нашей практике. Давайте как раз в объединенную ячейку вместо абзаца вставим еще одну таблицу. Что-бы было удобнее - увеличим ширину основной таблицы до 800 и ширину объединенной ячейки до 400.

Пример:

<table border="1" width="800" align="center" bordercolor="red" cellpadding="10">

<tr align="center">

<td rowspan="2" width="400">

<table border="1" bordercolor="green" width="100%">

<tr>

<td><p> Первая строка встроенной таблицы</p></td>

</tr>

<tr>

<td><p>Вторая строка встроенной таблицы</p></td>

</tr>

</table>

</td>

<td width="200"><p>Второй столбец таблицы</p></td>

<td width="200"><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td width="200"><p>Первый столбец второй строки</p></td>

<td width="200"><p>Второй столбец второй строки </p></td>

</tr>

<tr>

<td colspan="3">Третья строка</td>

</tr>

</table>


Обратите внимание: значение атрибута width встроенной таблицы прописано в процентах. В нашем случае встроенная таблица занимает 100% объема ячейки.

Встроенную таблицу мы могли разбить и на ячейки. Короче, все что можно делать в обычной таблице, можно и во встроенной.

И еще, что нам необходимо знать - это фоновый цвет таблицы. При создании таблицы у нее нет цвета фона. Фон у таблицы прозрачный т.е. фон таблицы будет таким же как и фон страницы.

Кстати, как задавать фон странице мы так и не поговорили. Это делается очень просто - тегу <body> прописываем атрибут bgcolor со значением того фона, который нам необходим.

Пример:

<body bgcolor="green">


Так же задаем фон таблицы, только атрибут bgcolor прописываем тегу <table> той таблицы, которой делаем фон.

Пример:

<table border="1" width="800" bgcolor="white" align="center" bordercolor="red" cellpadding="10">


На этом закончим о создании таблиц.