HtmlGuide.ru

Создание простых таблиц, теги <TABLE>, <TR> и <TD>

Автор admin | Дата: 07.05.2008

В HTML уже давно таблицы играют важную роль. Помимо главного значения, а это внесение информации и представление ее в табличном виде, их применяют для создания макета страницы. Для того чтобы представить на странице информацию в двух или более колонках отдельные блоки, добавляют в ячейки таблицы. В последнее время таблицы активно заменяют блоками <DIV>. С помощью блоков и CSS код страницы получается более коротким, хотя иногда наоборот, и редактируемым. Стало вполне возможным, изменив один файл стилей полностью или частично изменить вид страницы. Тогда как раньше, простое изменение ширины таблицы требовало редактирование html-кода на всех страницах. Это преимущество CSS неоспоримо, поэтому, каждый начинающий веб-мастер рано или поздно начинает активно применять CSS.

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

<table border=”1″>
<tr>
<td>первая ячейка первой строки</td>
<td>вторая ячейка первой строки</td>
</tr>
<tr>
<td>первая ячейка второй строки</td>
<td>вторая ячейка второй строки</td>
</tr>
</table>

Как видите, ничего сложного в создании таблиц нет. Но мы можем усовершенствовать нашу таблицу, например, объединить два столбца. Для этого применяется атрибут COLSPAN, а вот пример его использования:

<table border=”1″>
<tr>
<td colspan=”2″>объединение двух столбцов</td>
</tr>
<tr>
<td>первая ячейка второй строки</td>
<td>вторая ячейка второй строки</td>
</tr>
</table>

Для того чтобы объединить две строки, нужно применить атрибут ROWSPAN. Например

<table border=”1″>
<tr>
<td rowspan=”2″>объединение двух строк</td>
<td>первая ячейка первой строки</td>
</tr>
<tr>
<td>первая ячейка второй строки</td>
</tr>
</table>