Создание таблиц в HTML

Таблицы являются удобным средством форматирования данных в HTML.

Таблицу задает и определяет ее общие свойства тег <table></table>.

По горизонтали, например по центру, таблицу можно выровнять с

помощью тега <p align="center">, размещаемого перед <table>.

Тег <table> может иметь атрибуты:

<table border="5" width="100" cellpadding="10" cellspacing="10">, где

border="5" - ширина боковой грани в пикселях. При нулевом зачении

рамка исчезает совсем.

width="100" - ширина таблицы в пикселях или

width="50%" -ширина таблицы в % по отношению к ширине страницы в окне.

cellspacing="10" - ширина фронтальной грани в пикселях.

cellpadding="10" - задает размер пустого пространства в пикселях,

окружающего данные в ячейке.

Тег <caption></caption> задает заголовок таблицы.

Тег <tr> задает строку таблицы. Следующий тег <tr> задает следующую

строку таблицы. Конечный тег необязателен.

Тег <td> задает ячейку таблицы. Следующий тег <td> задает следующую

ячейку таблицы. Конечный тег необязателен.

Цвет фона ячейки задается в теге <td>: <td bgcolor="yellow">

Непарный тег <th> - задает элемент ячейки, которая является

заголовком таблицы. Этот тег должен находиться внутри тега <tr>.

Ячейка-заголовок отличается от обычной тем, что текст внутри нее

выделяется полужирным шрифтом.

Цвет фона заголовка задается: <tr><th bgcolor="yellow">Заголовок 1.

Создание таблиц в HTML дано в следующих примерах.

 


 

Пример 1.

 

<html>

<head>

<title>Таблица 1</title>

</head>

<body bgcolor="c0c0c0" text="navy" link="0000ff">

<p align="center"><table border="4" cellpadding="10" cellspacing="3">

<tr>

<td bgcolor="yellow"><b>Петров М.H.

</table>

</body>

</html>

 

Пример 2.

 

<html>

<head>

<title>Таблица 2, Экология.</title>

</head>

<body bgcolor="navy" text="red">

<center><table border="12" width="1" cellpadding="10" cellspacing="10">

<tr>

<td>Температура</td>

<td>Давление</td>

<td>Влажность</td>

<td>Скорость ветра</td>

<td>Направление ветра</td>

</tr>

<tr>

<td>21</td>

<td>745</td>

<td>65</td>

<td>4</td>

<td>юг</td>

</tr>

<tr>

<td>20</td>

<td>748</td>

<td>72</td>

<td>6</td>

<td>север</td>

</tr>

<tr>

<td>22</td>

<td>750</td>

<td>70</td>

<td>3</td>

<td>запад</td>

</tr>

</table></center>

</body>

</html>

 

Пример 2

    Температура
    Давление
    Влажность
    Скорость ветра
    Направление ветра
    21
    754
    75
    4
    запад
    20
    746
    79
    7
    восток
    19
    744
    69
    6
    сев.-зап.
    17
    750
    85
    5
    юг.-вост.
    21
    747
    90
    4
    юг.-зап.

Другие записи

10.06.2016. Примеры создания простейших Web-страниц. Создание элементов диалога (кнопок и др.)
В Интернете есть сайты, размещающие домашние web-странички бесплатно, например http://www.chat.ru/ (до 20 Мб), http://www.narod.ru/ (до 100 Мб), http://www.boom.ru/ (до 50 Мб), http://www.fortunecity.com/…