Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html » Tablicy-v-html

Таблица html

Таблицы html нашли очень огромное применение, благодаря им можно сверстать страницу практически любого уровня сложности, но их применение для верстки имеют свои минусы. Я также использовал раньше использовал табличную верстку, но со временем перешел на блочную. Вообще в интернете вы можете найти кучу споров о том какую верстку использовать, но решать вам. Ну ладно хватит воды, пора переходить к делу.

Для создания таблиц в HTML используется парный тег table, тег tr — размещает строки, а td — столбцы. Цвет, размер, выравнивание таблиц и их содержимого задается с помощью следующих атрибутов:

Вообще говоря про атрибуты можно сказать, что многие из них универсальные, например задавать высоту и ширину как вы помните мы можем не только таблицам, но и изображениям. Также мы можем задать фон для всего сайта (это обсуждалось в предыдущих уроках). Давайте взглянем на небольшой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
   <title>Использование таблиц в HTML</title>
 </head>
 <body>
<table width="100%" border="1">
   <tr height="20%">
    <td  colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
   </tr>
   <tr height="60%">
    <td width="22%" >&nbsp;</td>
    <td width="58%" bgcolor="green">&nbsp;</td>
    <td width="20%" >&nbsp;</td>
   </tr>
<tr height="20%">
    <td bgcolor="red">&nbsp;</td>
    <td>&nbsp;</td>
   </tr>
  </table>
</body>
</html>

В результате должно получится следующее:

Применение таблиц

Здесь я использовал незнакомый вам атрибут colspan тега td, который объединяет ячейки по горизонтали. Также есть атрибут rowspan, который объединяет ячейки по вертикали.

Вообще следует отметить, что таблица html, нужна больше подходит для вывода каких-то данных,а не для вёрстки странички сайта.



наверх