Далее на странице
Тег <table> предназначен для создания таблиц.
В основном таблицы используют:
- для представления числовых данных, текстовой или иной информации в табличном виде. Примером может служить прайс-лист.
- для создания каркаса страницы (при табличной верстке), границы которого в основном явно не прорисованы: страница разбивается на прямоугольные области разного размера (ячейки таблиц), в каждой из которых размещается свой элемент: текст, изображения, фотографии, реклама и т.д...
Атрибут Align
Атрибут тега table - определяет выравнивание таблицы по горизонтали.
- center – выравнивание таблицы по центру
- right - выравнивание таблицы по правому краю
Атрибут Background
Атрибут тега table - задает фоновый рисунок таблицы.
В качестве фонового рисунка желательно использовать изображение, размер которого совпадает (или больше) с размером таблицы, так как иначе картинка будет повторяться. В отличии от обычных изображений, размещаемых на странице - для фонового изображения нельзя задать ширину и высоту (оно всегда отображается в натуральную величину).
Атрибут Bgcolor
Атрибут тега table - задает фоновый цвет таблицы.
Атрибут Border
Атрибут тега table - задает толщину рамки таблицы.
- 0 если атрибут отсутствует.
Атрибут Bordercolor
Атрибут тега table - задает цвет рамки таблицы.
Добавление этого атрибута устраняет эффект трехмерности и делает рамку однотонной.
Атрибут поддерживается не всеми браузерами!
Атрибут Cellpadding
Атрибут тега table - задает отступ от границ ячейки до ее содержимого.
Атрибут Cellspacing
Атрибут cellspacing тега table - задает расстояние между границами соседних ячеек и расстояние от границ ячеек до границы таблицы.
- 2 если атрибут border установлен
<html>
<head>
<meta charset="utf-8">
<title> Тег table </title>
</head>
<body>
<table align="right" border="2" background="img/nebo.jpg" width="700" height="200">
<tr>
<td> Выравнивание таблицы по горизонтали по правому краю окна. Толщина границы
2 пикселя. Небо является фоновым рисунком таблицы. </td>
<td> Выравнивание таблицы по горизонтали по правому краю окна. Толщина границы
2 пикселя. Небо является фоновым рисунком таблицы. </td>
</tr>
</table>
</body>
</html>
Атрибут Cols
Атрибут cols тега table - указывает количество столбцов в таблице.
Если этот атрибут присутствует - браузеру требуется меньше времени для загрузки таблицы.
<html>
<head>
<meta charset="utf-8">
<title> Тег table </title>
</head>
<body>
<table bgcolor="#00FF99" border="2" width="700" bordercolor="#FF0000" cellpadding="25" cellspacing="10" cols="2">
<tr>
<td> Атрибут align отсутствует, поэтому таблица расположена у левого края окна.
Задали цвет фона. Ширина таблицы 700 пикселей. </td>
<td> Граница красного цвета. Отступ от границ ячеек до их содержимого 25 пикселей,
расстояние между границами соседних ячеек и от границ ячеек до границы таблицы 10
пикселей.</td>
</tr>
</table>
</body>
</html>
Атрибут Height и Width
Атрибут тега table - высота и ширина таблицы в пикселях, либо в процентах относительно ширины окна браузера
- целое положительное число. В этом случае ширина будет задана в пикселях.
- целое положительное число с символом %.
Атрибут Frame
Атрибут тега table - указывает, где рисовать границы вокруг таблицы.
- void - граница отсутствует.
- border – граница вокруг таблицы.
- above - граница по верхнему краю таблицы.
- below – граница по нижнему краю таблицы.
- hsides - горизонтальные границы таблицы: сверху и снизу.
- vsides – вертикальные границы таблицы: слева и справа.
- rhs - граница на правой стороне таблицы.
- lhs - граница на левой стороне таблицы
Атрибут Rules
Атрибут rules тега table - указывает, как рисовать рамку вокруг ячеек.
- all - рамка рисуется вокруг каждой ячейки.
- groups – линии рамки отображаются между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>.
- cols - линии рамки отображаются между колонками.
- none – рамка отсутствует.
- rows - линии рамки отображаются между строками.
- all если border отлично от 0
<html>
<head>
<meta charset="utf-8">
<title> Тег table </title>
</head>
<body>
<p> <table border="2" bordercolor="#FF0000">
<tr> <td> Граница вокруг таблицы и рамка вокруг ячейки. </td> </tr> </table> </p>
<p> <table border="2" bordercolor="#FF0000" frame="void">
<tr> <td> Граница вокруг таблицы отсутствует. </td> </tr> </table> </p>
<p> <table border="2" bordercolor="#FF0000" rules="none">
<tr> <td> Рамка вокруг ячейки отсутствует. </td> </tr> </table> </p>
<p> <table border="2" bordercolor="#FF0000" frame="above">
<tr> <td> Граница по верхнему краю таблицы. </td> </tr> </table> </p>
<p> <table border="2" bordercolor="#FF0000" frame="vsides">
<tr> <td> Вертикальные границы таблицы: слева и справа. </td> </tr> </table> </p>
<p> <table border="2" bordercolor="#FF0000" rules="cols" width="500">
<tr> <td> Линия рамки отображается между колонками таблицы. </td>
<td> Линия рамки отображается между колонками таблицы. </td> </tr> </table> </p>
<p> <table border="2" bordercolor="#FF0000" rules="rows">
<tr> <td> Линия рамки отображается между строками таблицы. </td> </tr>
<tr> <td> Линия рамки отображается между строками таблицы. </td> </tr> </table> </p>
<p> <table border="0">
<tr> <td> Граница вокруг таблицы и рамка вокруг ячейки отсутствуют. </td> </tr>
</table> </p>
</body>
</html>
