Таблицы. Таблицы являются основным элементом разметки html страниц
Таблицы являются основным элементом разметки html страниц. С их помощью определяются зоны, в которых на странице будут располагаться объекты. В ячейках таблицы могут помещаться рисунки, текст, списки, ссылки, другие таблицы и т.д. Таблица задается тэгом: <table> (</table>)
Таблица состоит из строк и столбцов (ячеек), поэтому их надо указать: <tr></tr> - строка таблицы; <td></td> - столбец (ячейка) таблицы.
Сначала следует задавать строки (пусть их будет две): <table> <tr></tr> <tr></tr> </table>
Затем в каждой строке задаются столбцы (ячейки): <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
Теперь надо заполнить получившийся каркас: <table> <tr> <td>1x1</td> <td>1x2</td> <td>1x3</td> </tr> <tr> <td>2x1</td> <td>2x2</td> <td>2x3</td> </tr> </table>
Первая цифра в этих записях - это номер ряда, а вторая - номер столбца (1х2 - первый ряд, второй столбец и т.д.). Если посмотреть, что уже получилось, то это будет выглядеть так:
Фон таблицы задается параметром bgcolor="цвет фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В следующем примере зададим фон для каждого столбца. <table> Параметрыheightи width можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В примере зададим ширину и высоту в пикселях для столбцов (ячеек): <table>
Если в ряду задается для какого-либо столбца (ячейки) высота большая, чем для других, то все ячейки (столбцы) ряда станут по высоте равными наибольшей. То же самое с рядами: если задать для какого-то ряда наибольшую длину, то все остальные ряды выровняются по наибольшему ряду. Можно задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально в процентах от общей ширины (высоты) таблицы или пикселях. Теперь осталось лишь выровнять содержимое внутри таблицы:
<table> <tr> <td height="35" width="50" bgcolor="FFCC33"> <center> 1x1 </center> </td> <td width="50" bgcolor="336699"> <center> 1x2 </center> </td> <td width="50" bgcolor="FFCC33"> <center>1x3 </center> </td> </tr> <tr> <td height="35" width="50" bgcolor="336699"> <center> 2x1 </center> </td> <td width="50" bgcolor="FFCC33"> <center> 2x2 </center> </td> <td width="50" bgcolor="336699"> <center> 2x3 </center> </td> </tr> </table>
В каждой ячейке (столбце) могут находиться и картинки, и текст, и даже другие таблицы (в этом случае такие таблицы называются - вложенными). Тэги, которые применяются для форматирования текста - те же, что для обычного текста. Тэги для центрирования текста могут прописываться в каждой ячейке. Вертикальное выравнивание задается атрибутом valign="middle" , т.е. содержимое конкретной ячейки будет находиться в середине ячейки (top - наверху или bottom - внизу).
Пример: <table> <tr> <td height="35" width="50" bgcolor="FFCC33" valign="top"> <center>1x1</center> </td> <td width="50" bgcolor="336699"> <center>1x2</center> </td> <td width="50" bgcolor="FFCC33" valign="bottom"> <center>1x3</center> </td> </tr> <tr> <td height="35" width="50" bgcolor="336699" valign="bottom"> <center>2x1</center> </td> <td width="50" bgcolor="FFCC33"> <center>2x2</center> </td> <td width="50" bgcolor="336699" valign="top"> <center>2x3</center> </td> </tr> </table> Таблица может создаваться с рамкой. Рамка вводится параметром border. Зададим рамку шириной 3 пикселя: <table border="3">. Результат показан на рисунке 23.1.
Рисунок 23.1 – Таблица с закрашенным фоном ячеек
Рекомендуемые страницы: |
