Оформления таблиць

Для раціонального розподілу площі сторінки між її текстовими i графічними фрагментами використовують таблиці.

Таблиця задається тегом < table> < /table>.

Рядки таблиці задаються тегом < tr> < /tr>.

Стовпчики таблиці задаються тегом < td> < /td>.

Нехай потрібно створити таблицю з двома рядками i трьома стовпчиками наведеного виду i наповнення.

Для створення цієї таблиці необхідно набрати такий текст (спечатку задаються рядки):

< table

< tr>

< td> lxl< /tr>

< td> lx2< /tr>

< td> lx3< /tr>

< /tr>

< tr>

< td> 2xl< /tr>

< td> 2x2< /tr>

< td> 2x3< /tr>

< /tr>

< table>

Щоб у вздповвдних комірках таблиці задати колір фону (параметр bgcolor), висоту (height) i ширину (width) комірок таблиці в пікселях, треба вище наведений текст доповнити таким чином:

< table

< tr>

< td height =" 35" width=" 50" bgcolor=" #FFCC33" > lxl< /tr>

< td width=" 50" bgcolor=" #336699" > 1x2< /tr>

< td width=" 50" bgcolor=" #FFCC33" > lx3< /tr>

< /tr>

< tr>

< td height =" 35" width=" 50" bgcolor=" #336699" > 2xl< /tr: >

< td width=" 50" bgcolor=" #FFCC33" > 2x2< /tr> < td width=" 50" bgcolor=" #336699" > 2x3< /tr>

< /tr>

< table>

ВИРІВНЮВАННЯ ВМICТУ КОМІРОК

Щоб вирівняти вміст комірок таблиці по горизонталі, треба вище наведений текст редагувати таким чином:

< table> < tr>

< td height =" 35" width=" 50" bgcolor=" #FFCC33" > < center> 1х1 < /center> < /tr>

< td width=" 50" bgcolor=" #336699" > < center> 1х2 < /center> < /tr>

< td width=" 50" bgcolor=" #EFCC33" > < center> 1х3< /center> < /tr> < /tr> < tr>

< td height =" 35" width=" 50" bgcolor=" #336699" > < center>, 2xl< /tr>

< td width=" 50" bgcolor=" #FFCC33" > < center> 2х2 < /center> < /tr>

< td width=" 50" bgcolor=" #336699" > < center> 2х3 < /center> < /tr> < /tr> < table>

В кожній комірці таблиці може знаходитись текст, малюнки i навігь вкладені таблиці. Їх вміст форматусться за допомогою вже відомих тегів. Кожна комірка таблиці є ніби окрема кімната, тому теги для центрування в попередньому прикладі довелось писати для кожної комірки.

Вирівнювання по вертикалі виконуеться за допомогою атрибута valign=" middle" (top, bottom) - посередині комірки (зверху, знизу).

Щоб вирівняти вміст комірок таблиці по вертикалі треба вище наведений текст редагувати таким чином:

< table>

< tr>

< td height =" 35" width=" 50" bgcolor=" #FFCC33" valign=" top" >

< center> 1х1 < /center> < /tr>

< td width=" 50" bgcolor=" #336699" > < center> 1х2 < /center> < /tr>

< td width=" 50" bgcolor=" #FFCC33" valign=" bottom " > < center> 1х3

< /center> < /tr>

< /tr>

< tr>

< td height =" 35" width=" 50" bgcolor=" #336699" valign=" bottom" >

< center> 2xl< /tr>

< td width=" 50" bgcolor=" #FFCC33" > < center> 2х2 < /center> < /tr>

< td width=" 50" bgcolor=" #336699" valign=" top" > < center> 2х3

< /center> < /tr>

< /tr>

< table>

Тут параметр valign встановлено не для всіх комірок, щоб можна було побачити різницю у вирівнюванні вмісту комірок.