td
Краткое описание атрибутов для тега
<td></td>:
colspan - обьеденяет сосдение ячейки.
rowspan - обьеденяет две и более столбца.
width - устанавливает ширину ячейки. Ширину можно указывать как статическую, в пикселях
(пример:100px), так и относительную - в процентах (пример: 30%). По умолчание ширина
ячейки устанавливается по ширине содержимого.
height - устанавливает высоту ячейки. Рекомендуется не указывать явно высоту
ячейки если она является каркасом сайта (табличная верстка)
background - позволяет указать цвет заливки или фоновый рисунок ячейки.
Ограничения элемента <td>:
Использование ячеек <td>...</td> должно соотвествовать правилам создания таблиц.
<table>
<tr>
<td>
...
</td>
</tr>
</table>
Описание атрибутов:
1. атрибут colspan
Атрибут colspan используется в тех случаях когда нужно обьеденить две соседние ячейки. Структура таблиц задумана таким образом,
что во всех строках таблицы должно быть одинаковое количество строк.
<table>
<tr>
<td>1 ячейка.</td>
<td>2 ячейка.</td>
</tr>
<tr>
<td>3 ячейка.</td>
<td>4 ячейка.</td>
</tr>
</table>
Результат:
| 1 ячейка. |
2 ячейка. |
| 3 ячейка. |
4 ячейка.. |
И если мы сделаем, к примеру, в первой строке 2 ячейки, а во второй одну,
то ячейка 1 будет равной по ширине ячейке 2, или другими словами,
ячейка 3 будет растягивать ячейку 1.
<table>
<tr>
<td>1 ячейка.</td>
<td>2 ячейка.</td>
</tr>
<tr>
<td>3 ячейка.</td>
</tr>
</table>
Результат:
| 1 ячейка. |
2 ячейка. |
| 3 ячейка.............. |
Во избежание этого и используется атрибут colspan, в котором мы можем
указать скольким ячейкам будет равна наша ячейка 3.
<table>
<tr>
<td>1 ячейка.</td>
<td>2 ячейка.</td>
</tr>
<tr>
<td colspan="2">3 ячейка.</td>
</tr>
</table>
Результат:
| 1 ячейка. |
2 ячейка. |
| 3 ячейка.............. |
Если в первой строке будет хоть 20 ячеек, указав во второй строке всего лишь
одну ячейку и присвоив ей атрибут colspan с значением 20, мы растянем эту ячеку на ширину равную 20 ячейкам из первой строки.
1. атрибут rowspan
Атрибут rowspan используется в тех случаях когда нужно обьеденить несколько строк в одну.
Таких случаях есть два выхода, 1 - сделать вложенность таблиц, 2 - использовать атрибут rowspan.
Однозначного ответа, что лучше, вложенные таблицы или rowspan нет, существуем огромная
масса случаев когда и тот и другой случай лучше применять. Поэтому решение принимается исходя из сложившейся ситуации.
Мы сейчас расмотрим пример, как нужно использовать атрибут rowspan для обьеденения строк.
<table>
<tr>
<td rowspan="2">1 ячейка.</td>
<td>2 ячейка.</td>
</tr>
<tr>
<td colspan="2">3 ячейка.</td>
</tr>
</table>
Результат:
| 1 ячейка. |
2 ячейка. |
| 3 ячейка.............. |
Таким вот не хитрым html-средством можно создавать таблицы с тремя ячейками, 1 слева и 2 справа.
Добавить комментарий
