Таблицы используются, когда вам необходимо показать табличные данные», например, информацию, логически упорядоченную в столбцы и ряды.
Это трудно?
Построение таблиц в HTML может показаться сложным на первый взгляд, но, если вы не будете дёргаться, это окажется строго логичным — как и всё в HTML.
Пример 1:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
будет выглядеть в браузере:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Какая разница между
Как видно из приведённого примера, это, возможно, самый сложный из примеров HTML, которые мы вам давали до сих пор. Давайте здесь остановимся и сделаем пояснения:
Для вставки таблиц используются 3 базовых тэга:
- — начало и конец таблицы. Логично.
- —table row/ряд таблицы», начинает и заканчивает горизонтальный ряд ячеек. Тоже логично.
Вот что происходит в Примере 1: таблица начинается с
, затем идёт , указывающий на начало нового ряда. В ряду вставлены две ячейки: и . Ряд закрывается , и сразу начинается новый ряд . В новом ряду также две ячейки. Таблица закрывается
— сокращение отtable data/табличные данные». Этот тэг начинает и заканчивает каждую ячейку ряда таблицы. Всё просто и логично. Cell 1 Cell 2 .
Чтобы было ещё понятнее: ряды это горизонтальные строки ячеек, а столбцы — вертикальные столбцы ячеек:
Cell 1 Cell 2 Cell 3 Cell 4 Cell 1 и Cell 2 образуют ряд. Cell 1 и Cell 3 образуют столбец.
В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.
Пример 2:
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12 будет выглядеть в браузере:
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12 Есть ещё какие-нибудь атрибуты?
Разумеется. Например, атрибут border используется для специфицирования толщины рамки вокруг таблицы:
Пример 3:
Cell 1 Cell 2 Cell 3 Cell 4 будет выглядеть в браузере:
Cell 1 Cell 2 Cell 3 Cell 4 Как и с изображениями, вы можете указывать размер таблицы в пикселах или в процентах от размера экрана:
Пример 4:
Cell 1
Что можно вставлять в таблицы?
Теоретически — всё: текст, ссылки и изображения… НО таблицы предназначаются для вывода табличных данных (т. е. данных, которые изначально представляются в виде столбцов и рядов), поэтому избегайте вставки данных в таблицы только потому, что вы хотите разместить их рядом друг с другом.
В добрые старые времена Internet — т. е. несколько лет назад — таблицы часто использовались для распределения содержимого на странице. Однако сегодня для этого есть более крутой способ — CSS. Но об этом позже.
Теперь примените ваши знания на практике и создайте несколько таблиц различных размеров, с разными атрибутами и содержимым. Это займёт у вас несколько часов.
