Урок 10. Таблицы в html

В данной статье я расcкажу о том как построить таблицы в HTML.

Таблицы обычно используют для показания «табличных данных«, например, информацию, логически упорядоченную в столбцы и ряды.

По началу вам может показаться, что построение таблиц в HTML сложное. Но прочитав данную статью вы поймете, что это не так.

Например,

Клетка 1 Клетка 2
Клетка 3 Клетка 4

Разницы между <tr> и <td>

Давайте разберем пример приведенный выше.

Для создания таблиц в HTML используют три основных тэга:

<table> — начало и конец таблицы.
<tr> — «table row/ряд таблицы», начинает и заканчивает горизонтальный ряд ячеек.
<td> — сокращение от «table data/табличные данные». Данный тэг начинает и заканчивает каждую ячейку ряда таблицы.

Давайте вернемся к нашему примеру: таблица начинается с тэга <table>, затем идет тэг <tr> который создает новый ряд. В данном ряду указываются две ячейки: <td>Клетка 1</td> и <td>Клетка 2</td>. С помощью тэга </tr> мы закрываем ряд, и тут же создаем новый ряд <tr>. И также как и в первом ряду создаем две ячейки: <td>Клетка 3</td> и <td>Клетка 4</td>. Закрываем ряд </tr>. Таблица закрывается </table>.

Если говорить кратко то: ряды — это горизонтальные строки ячеек, а столбцы — вертикальные столбцы ячеек:

Клетка 1 и Клетка 2 образуют ряд. Клетка 1 и Клетка 3 образуют столбец.

В примере приведенном выше таблица имеет два ряда и два столбца. Но вы также можете создавать таблицы с неограниченным числом рядов и столбцов.

Например,

Клетка 1 Клетка 2 Клетка 3 Клетка 4 Клетка 5 Клетка 6
Клетка 7 Клетка 8 Клетка 9 Клетка 10 Клетка 11 Клетка 12
Клетка 13 Клетка 14 Клетка 15 Клетка 16 Клетка 17 Клетка 18
Клетка 19 Клетка 20 Клетка 21 Клетка 22 Клетка 23 Клетка 24

Для того, чтобы создать рамку вокруг таблицы используют атрибут border. С помощью данного атрибута задается толщина рамки вокруг таблицы.

Например,

Клетка 1 Клетка 2
Клетка 3 Клетка 4

Толщина рамки задается в пикселях.

Также вы можете задавать размер таблице в пикселях или в процентах от размера экрана:

Например,

Клетка 1 Клетка 2
Клетка 3 Клетка 4

У таблиц есть большое количество атрибутов. Вот еще дав из них:

align: используется для выравнивания содержимого по горизонтали, в ряду или в отдельной ячейке. Например, left (по левому краю), center (по центру) или right (по правому краю).

valign: используется для выравнивания содержимого ячейки по вертикали. Например, top, middle или bottom.

Например,

Какую информацию можно добавлять в таблицы?

Теоретически вы можете добавлять все: текст, ссылки и изображения…

Раньше таблицы использовали для распределения содержимого страницы. Однако для этого создали другой способ — CSS. Но об этом чуть позже.

Урок 11. Таблицы в html (продолжение) >>

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

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