Розмічання таблиць засобами HTML

Теги розмітки таблиці

Приклад:

Розмітка таблиці відповідними тегами:

Атрибути тегів розмітки таблиці

Якщо в усіх рядках ширина клітинок (атрибут width) однакова, то її достатньо вказати лише для одного рядка.

<table width = "100%"> — ширина таблиці дорівнює ширині робочого поля вікна браузера;
<td width = "50%"> — ширина клітинки дорівнює половині ширини таблиці.

Відступи

Для налаштування відстаней між клітинками, а також між текстом і межами використовують атрибути відступів:
<table cellspacing = "10" cellpadding = "10"
bgcolor = "blue">
<tr bgcolor = "white">
<td width = "100">1</td>
<td width = "100">2</td>
</tr>
</table>

Форматування вмісту клітинок

Теги рядків (<tr>) і клітинок (<td>) можуть включати атрибути для змінення вирівнювання тексту відносно меж клітинки.

Атрибут align дозволяє задавати горизонтальне вирівнювання:

• align = "left" — за лівим краєм;

• align = "center" — по центру клітинки;

• align = "right" — з а правим краєм.

Атрибут valign дозволяє задавати вертикальне вирівнювання:

• valign = "middle" — посередині клітинки;

• valign = "top" — в горі клітинки;

• valign = "botton" — внизу клітинки.

Для об’єднання кількох клітинок використовують атрибути colspan (злиття клітинок у рядку) і rowspan (злиття клітинок у стовпці).

Практична робота:

Створіть вебсторінку з таблицею “Розклад уроків на день”, яка містить стовпці:

• Номер уроку

• Назва уроку

Таблиця повинна мати 3–4 рядки з прикладами предметів.

Приклад:

Середовище: http://htmlbook.in.ua/htmledit.html