td

21.11.2011 17:53

Краткое описание атрибутов для тега
<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 справа.
 

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


Защитный код
Обновить


Последние комментарии

  • Чем отличаются margin-top от margin-bottom?
  • 5
  • Отличный сайт! :D