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

Автор: | 29.07.2014

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

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

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

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

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

• Теги

– объявляют таблицу.
• border=» » – устанавливает толщину рамки таблицы.
• Теги

– определяют табличный ряд (по вертикали).
• Теги

– определяют ячейку (по горизонтали).
Простая таблица HTML

Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)

 

Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)

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

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

Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)

 

Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)

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

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

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

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

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

Первая ячейка (1,1) какой-то текст
много слов Четвёртая ячейка (2,2)

 

Первая ячейка (1,1) какой-то текст
много слов Четвёртая ячейка (2,2)

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

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

Первая ячейка (1,1) какой-то текст
много слов Четвёртая ячейка (2,2)

 

Первая ячейка (1,1) какой-то текст
много слов Четвёртая ячейка (2,2)

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

Высота и ширина ячеек задаётся параметрами «width» и «height».
Таблица HTML

Первая ячейка (1,1) какой-то текст
много слов Четвёртая ячейка (2,2)

 

Первая ячейка (1,1) какой-то текст
много слов Четвёртая ячейка (2,2)

Горизонтальное объединение ячеек html

Для горизонтального объединения применяется атрибут — colspan=» «, в которм указывается нужная длина (в ячейках)

<html>
<head>
<title>Горизонтальное объединение ячеек</title>
</head>
<body>
<table border="1" cellpadding="12" >
<tr>
<td colspan="2" >Две в одной</td>
<th colspan="3" >Три в одной</th>
</tr>
<tr>
<td>Первая</td>
<td>Вторая</td>
<td>Третья</td>
<td>Четвёртая</td>
<td>Пятая</td>
</tr>
</table>
</body>
</html>
Две в одной Три в одной
Первая Вторая Третья Четвёртая Пятая
Вертикальное объединение ячеек html

Для вертикального объединения применяется атрибут — rowspan=» «, в которм указывается нужная высота (в ячейках)

<html>
<head>
<title> Вертикальное объединение ячеек </title>
</head>
<body>
<table border="1" cellpadding="12">
<tr>
<td>Первая</td>
<td>Вторая</td>
</tr>
<tr>
<td rowspan="4" >4 в одной</td>
<td>раз</td>
</tr>
<tr>
<td>два</td>
</tr>
<tr>
<td>три</td>
</tr>
<tr>
<td>четыре</td>
</tr>
</table>
</body>
</html>
Первая Вторая
4 в одной раз
два
три
четыре
Вертикальное и горизонтальное объединение html

Опираясь на полученные знания из предыдущих уроков, сделаем таблицу в которой будет сразу же горизонтальное и вертикальное объединение (и по отдельности).

Сделаем таблицу размера 6 x 6 (из 36 ячеек) и по-разному объединим в ней ячейки, задав таблице и ячейкам некоторые стили. Но поскольку в таблице будут объединенные ячейки, то 6 X 6 – это лишь, условный размер.

<html>
<head>
<title> мегатаблица </title>
</head>
<body>

<table style="margin: auto" border="1" cellpadding="10">
<tr>
<td bgcolor="#F8FFC6" colspan="3" > 1</td>
<td bgcolor="#F8FFC6" colspan="3" > 2</td>
</tr>

<tr>
<td bgcolor="#FFD5C6"  rowspan="4" > 3</td>
<td bgcolor="#C8FF95"> 4</td>
<td bgcolor="#C8FF95"> 5</td>
<td bgcolor="#C8FF95"> 6</td>
<td bgcolor="#C8FF95"> 7</td>
<td bgcolor="#FFD5C6" rowspan="4" > 8</td>
 </tr>

<tr>
<td bgcolor="#C8FF95"> 9</td>
<td bgcolor="#E5CCFF" rowspan="2" colspan="2" >10</td>
<td bgcolor="#C8FF95">11</td>

</tr>

<tr>
<td bgcolor="#C8FF95">12</td>
<td bgcolor="#C8FF95">13</td>
</tr>

<tr>
<td bgcolor="#C8FF95">14</td>
<td bgcolor="#C8FF95">15</td>
<td bgcolor="#C8FF95">16</td>
<td bgcolor="#C8FF95">17</td>
</tr>

<tr>
<td bgcolor="#F8FFC6" colspan="3" >18</td>
<td bgcolor="#F8FFC6" colspan="3" >19</td>
</tr>

</table>

</body>
</html>

1 2
3 4 5 6 7 8
9 10 11
12 13
14 15 16 17
18 19

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ответить * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.