Таблицы в HTML

Таблицы в HTML(3) Основы HTML

HTML для тех, кто в танке. Таблицы HTML

Таблицы в HTML являются одним из самых необходимых элементов и самыми универсальными средствами форматирования картинок и текста. Есть, конечно, и альтернативные способы, такие, как слои, например, но это громоздко, тяжко и неудобно… Дело в том, что всякая бродилка видит слои по своему, и для более менее приличного отображения слоев необходимо писать длинный и нудный скрипт, да и тот не панацея… В то время, как таблицы, хоть в некоторых нюансах нередко и расходятся, но расхождение-то минимально.

Разбираем таблицы

Итак, код простейшей таблицы 2х2 ячейки:<table width=”200″ border=”1″ cellspacing=”0″ cellpadding=”0″>начало таблицы содержит:
width – ширина (у нас 200 пикселей),
border – толщина каемки/бордюра нашей таблицы (у нас 1 пиксель)
cellspasing расстояние между ячейками,
cellspadding – отступ от границ ячейки внутри нее. Остальной код:

    <tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
тег открытия строки
тег ячейки 1
тег ячейки 2
конец строки
начало второй строки
тег ячейки 3
тег ячейки 4
конец второй строки
конец таблицы

Вот такая вот табличка:

1 2
3 4

добавив в код сегмент:

<tr>
<td>3</td>
<td>4</td>
</tr>

мы получим третью строку с двумя столбиками.

Количество ячеек может располагаться и по-другому – например так:

1 2
3
4 5
1 3
2
4 5
<table width=”200″ border=”1″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td rowspan=”2″>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr
>
<tr align=”center”>
<td>4</td>
<td>5</td>
</tr>
</table>

выделение жирным в коде соответствует закрашенности серым цветом в таблице.
все отличие такого построения таблиц залючается в появлении параметра rowspan=”2″
цифра в котором соответствует количеству “подстрок”, т.е. буквально то, сколько строк слилось в этой ячейке:

1 3
2
4 5
<table width=”200″ border=”1″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>1</td>
<td rowspan=”2″>3</td>
</tr>
<tr>
<td>2</td>

<tr align=”center”>
<td>4</td>
<td>5</td>
</tr>
</table>
Читать также:  Цвета в HTML


  Если в симметричной таблице мы читаем слева-направо, то тут происходит то же самое, только почему же в коде впереди 2-ки стоит ячейка с цифрой 3? Все очень просто – буквально код расшифровывается, как “ячейка 1″, “ячейка 3, состоящая из ДВУХ подстрок”, ячейка 2, второй строки. Но физически ячейка 3 принадлежит к ПЕРВОЙ строке! Ведь HTML читается именно построчно – слева-направо ;0)
А что будет, если поставить после 3-ки еще такую же ячейку? 3b например?

1 3 3b
2
4 5
<table width=”200″ border=”1″ cellpadding=”0″ cellspacing=”0″>
  <tr>
<td>1</td>
<td rowspan=”2″>3</td>
<td rowspan=”2″>3b</td>
</tr>
<tr>
<td>2</td>

<tr align=”center”>
<td>4</td>
<td>5</td>
</tr>
</table>

Продолжение следует…

Оцените статью
Новостной портал
Добавить комментарий