Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены


Уроки HTML


Простая таблица HTML

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

Из этого урока вы узнаете, как создать простую таблицу и управлять её свойствами (цвет, ширина, высота, толщина и цвет рамки, параметры ячеек ).

Для начала создадим простую таблицу, состоящую из четырёх ячеек, в которых будут написаны короткие фразы.

Перед этим нужно понять следующее:

• Теги <table> </table> – объявляют таблицу.
• border=" " – устанавливает толщину рамки таблицы.
• Теги <tr> </tr> – определяют табличный ряд (по вертикали).
• Теги <td> </td> – определяют ячейку (по горизонтали).

<html>
<head>
<title>Простая таблица HTML</title>
</head>
<body>
<table border="2">
<tr>
<td>Первая ячейка (1,1)</td>
<td>Вторая ячейка (1,2)</td>
</tr>
<tr>
<td>Третья ячейка (2,1)</td>
<td>Четвёртая ячейка (2,2)</td>
</tr>
</table> 
</body>
</html>
Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)


После этого зададим таблице цвет и толщину рамки, какой-нибудь фон и цвет текста. Это делается с помощью CSS атрибутов в первом теге таблицы "<table>" 

<html>
<head>
<title>Простая таблица HTML</title>
</head>
<body>
<table border="4" style="border-color: #FF9900; background-color: #E4FBA1; color: #F46512">
<tr>
<td>Первая ячейка (1,1)</td>
<td>Вторая ячейка (1,2)</td>
</tr>
<tr>
<td>Третья ячейка (2,1)</td>
<td>Четвёртая ячейка (2,2)</td>
</tr>
</table> 
</body>
</html>
Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)

Параметр "color: " задаёт цвет текста, который будет написан внутри ячеек этой таблицы.



Отступы между ячейками и рамкой таблицы html

Существую два атрибута:

• cellspacing=" " – определяет расстояние между ячейками таблиц и рамкой самой таблицы.
• cellpadding=" " – определяет расстояние между границей ячейки и ее содержимым.


Создадим таблицу с их применением: 

<html>
<head>
<title>Таблица HTML</title>
</head>
<body>
<table border="2" cellspacing="14" cellpadding="10">
<tr>
<td>Первая ячейка (1,1)</td>
<td> какой-то текст</td>
</tr>
<tr>
<td> много слов</td>
<td> Четвёртая ячейка (2,2)</td>
</tr>
</table> 
</body>
</html>
Первая ячейка (1,1) какой-то текст
много слов Четвёртая ячейка (2,2)

Иногда может быть так , что нужно сделать рамки таблицы (и ячеек) невидимыми. Для этого нужно просто в значении параметра "border" указать ноль "0".

Создадим таблицу "без рамок" и зададим цвета ячейкам. 

<html>
<head>
<title>Таблица HTML</title>
</head>
<body>
<table border="0" cellspacing="14" cellpadding="10">
<tr>
<td style="background-color: #F9F5AE;">Первая ячейка (1,1)</td>
<td style="background-color: #B5D986;"> какой-то текст</td>
</tr>
<tr>
<td style="background-color: #B5D986;"> много слов</td>
<td style="background-color: #F9F5AE;"> Четвёртая ячейка (2,2)</</td>
</tr>
</table>
</body>
</html>
Первая ячейка (1,1) какой-то текст
много слов Четвёртая ячейка (2,2)


Высота и ширина ячеек html

Высота и ширина ячеек задаётся параметрами "width" и "height". 

<html>
<head>
<title>Таблица HTML</title>
</head>
<body>
<table border="2" cellspacing="14" cellpadding="10">
<tr>
<td width="120" style="background-color: #F9F5AE;">Первая ячейка (1,1)</td>
<td width="180" style="background-color: #B5D986;"> какой-то текст</td>
</tr>
<tr>
<td width="120" style="background-color: #F9F5AE;"> много слов</td>
<td width="180" style="background-color: #B5D986;"> Четвёртая ячейка (2,2)</</td>
</tr>
</table> 
</body>
</html>
Первая ячейка (1,1) какой-то текст
много слов Четвёртая ячейка (2,2)



◄ Предыдущий урок Содержание Следующий урок ►