Как в HTML сделать таблицу? Урок — 9 (для начинающих)
Если использовать HTML без CSS, то таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д.
Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:
Итак, как в HTML сделать простую таблицу?
Для постройки таблицы необходимо использовать три тега:
TABLE – этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример.
Закрывающий тег </table> обязателен.
Таблица состоит из ряда
| ряд 1 | ряд 1 |
| ряд 2 | ряд 2 |
| ряд 3 | ряд 3 |
| ячейка 1 | ячейка 2 |
| ячейка 1 | ячейка 2 |
| ячейка 1 | ячейка 2 |
TR – создает новый ряд таблицы. Закрывающий тег </tr> обязателен.
TD – создает новую ячейку в ряду. Закрывающий тег </td> обязателен.
Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
| ряд 3 ячейка 1 | ряд 3 ячейка 2 |
Давайте все объясню.
Перед каждым созданием новой таблицы открывается тег <table> .
Дальше, размещаем в середине контейнера <table> тег <tr> , что говорит о начале нового ряда.
В этом ряду вставляем две ячейки с содержанием при помощи тега
<td> ряд 1 ячейка1 </td> <td> ряд1 ячейка2 </td>
Закрываем ряд тегом </tr> .
Открываем другой ряд тегом <tr> и вставляем в него снова две ячейки.
Закрываем ряд тегом </tr> .
Открываем третий ряд тегом <tr> и вставляем в него снова две ячейки.
Закрываем ряд тегом </tr> .
Закрываем таблицу тегом </table> .
Я думаю, разобрались? Если кто-то забыл, что такое атрибут border , который я использую вместе с тегом <table> , напоминаю, что это толщина рамки. Если в border будет установлено значение «0» , тогда границы таблицы будут невидимые.
Посмотрите парочку примеров созданных таблиц и можно идти дальше:
| ряд 1 ячейка 1 |
| ряд 2 ячейка 1 |
| ряд 1 ячейка 1 | ряд 1 ячейка 2 | ряд 1 ячейка 3 |
Для того чтобы вставить картинку в таблицу, нужно владеть элементарными начальными знаниями о том, как вставляется изображение в HTML файл. Об этом я рассказываю в этой статье. Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом:
в строку между тегами <td> </td> вставить изображение.
| ряд 1 ячейка 1 | ряд 1 ячейка 2 |
А как объединить ячейки в таблице?
Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN – определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN – определяет количество рядов.
По умолчанию значение 1.
Для лучшего понимания посмотрите пример:
объединяем ячейки в верхнем ряду с помощью атрибута colspan :
| ряд 1 ячейка 1+2 | |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
Теперь соединим ряды в ячейки с помощью атрибута rowspan :
| Ячейка 1, ряд 1+2 | ряд1 ячейка2 |
| ряд 2 ячейка 2 |
Как установить размер таблицы?
Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:
WIDTH – ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT – высота таблицы. Размер задается в пикселях или в процентах.
Выравнивание содержимого в таблице
Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:
ALIGN – горизонтальное выравнивание содержимого в таблице.
К атрибуту ALIGN присваивается значения: left (по умолчанию), center , right .
left — прижать содержимое к левой части;
center – установить по центру;
right — прижать содержимое к правой части
VALIGN – вертикальное выравнивание содержимого в таблице.
К атрибуту VALIGN присваивается значения: top , bottom , middle .
top – прижать содержимое к верху;
bottom – прижать содержимое к низу;
middle – установить содержимое посередине
Как сделать фон таблицы?
Можно также задать фон таблице для всех ее ячеек вместе взятых, а также для каждой ячейки по отдельности. Можно задать фон цветом, а можно и картинкой. Для фона существуют два атрибута:
BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND –фон в таблице заполняется рисунком.
Внимание: если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге <table> . А если только к определенной ячейке, тогда в тег <td> .
Для лучшего понимания посмотрите пример:
Внимание: если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки.
И напоследок расскажу еще о двух полезных атрибутах.
В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты:
CELLPADDING –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.
Как вставить картинку в таблицу html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14
Всем привет!
Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML. А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д.
Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:
…но это уже в прошлом, так как на сегодняшний день есть более эффективные способы создания каркасов для сайта с помощью CSS. Я частенько использую таблицу на своем блоге или на сайте, вот например, как в этой статье.
Я думаю, вы разобрались, для чего нужно учиться создавать таблицу.
Из каких основных тегов состоит таблица?
○ тег TABLE
Это главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды.
Закрывающий тег обязательный.
○ тег TR
Внутри контейнера <table>……</table> размещаются ряды:
| ряд 1 | ряд 1 |
Ряды создаются с помощью тега <tr></tr> . Именно с помощью этого тега и определяется количество рядов.
Закрывающий тег обязателен.
○ тег TD
Внутри контейнеров <table><tr>……</tr></table> размещаются столбики (ячейки):
| ячейка 1 | ячейка 2 |
| ячейка 1 | ячейка 2 |
| ячейка 1 | ячейка 2 |
Столбики создаются с помощью тега <td></td> .
Закрывающий тег обязателен.
Внимание: без использования всех этих тегов таблицу создать не возможно.
Теперь попробуем воспользоваться теорией и создадим таблицу на практике.
Задание: создать таблицу из одного ряда, где будет три столбика.
| ряд -1 /столбик 1 | столбик 2 | столбик 3 |
Задание: создать таблицу из трех рядов и трех столбиков.
| ряд -1 /столбик 1 | столбик 2 | столбик 3 |
| ряд -2 /столбик 1 | столбик 2 | столбик 3 |
| ряд -3 /столбик 1 | столбик 2 | столбик 3 |
До этого момента вам все ясно ? Кто не понял, поднимите руку! Ага, поняли все, значит идем далее.
Теперь рассмотрим атрибуты для таблицы.
*Атрибуты
○ Границы таблицы в HTML
Чтобы была видна таблица, к тегу <table> применяется атрибут « border » .
Если значение атрибута «border» «0» , границы видно не будет, если не прописать к тегу <table> атрибут «border» , граница в таблице тоже видна не будет.
| ряд -1 /столбик 1 | столбик 2 | столбик 3 |
○ Как объединить ячейки в таблице
Чтобы объединить ячейки в таблице используют атрибуты «colspan» и «rowspan» к тегу <td> .
- colspan — объединение ячеек по горизонтали;
- rowspan — объединение ячеек по вертикали.
В значениях указываете, сколько нужно объединить ячеек.
| ряд 1 столбик 1 | |
| ряд 2 столбик 1 | ряд 2 столбик 2 |
| ряд 1 столбик 1 | ряд 1 столбик 2 |
| ряд 2 столбик 1 |
Более сложный пример:
| ряд -1 /столбик 1 | столбик 2 | столбик 3 | ||
| ряд -2 /столбик 1 | столбик 2 | столбик 3 | столбик 4 | |
○ Как увеличить расстояние между ячейками таблицы
Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding» к тегу <table>
В значениях у атрибута «cellpadding» указываете расстояние отступа
| ряд 1 столбик 1 | столбик 2 |
Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing» к тегу <table>
В значениях у атрибута «cellspacing» указываете расстояние между ячейками
| ряд 1 столбик 1 | столбик 2 |
○ Как сделать фон таблицы HTML
Чтобы сделать фон таблицы HTML используют к тегу <table> и <td> такие атрибуты:
- BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
- BACKGROUND –фон в таблице заполняется рисунком.
| ряд -1 /столбик 1 | столбик 2 | столбик 3 | ||
| ряд -2 /столбик 1 | столбик 2 | столбик 3 | столбик 4 | |
○ Как вставить картинку в таблицу HTML
Чтобы вставить картинку в таблицу HTML, между тегом <td> вставляться тег <img> .
| ряд 1 ячейка 1 | ячейка 2 |
○ Ширина и высота таблицы HTML
Чтобы вставить ширину и высоту в таблицы HTML, используют к тегу <table> атрибут «width» и «height» :
- Width – ширина таблицы
- Height – высота таблицы
| ряд 1 ячейка 1 | ячейка 2 |
| ряд 2 ячейка 1 | ячейка 2 |
Значения задаются в пикселях (px) или в процентах (%)
○ Выравнивание содержимого в таблице HTML
Чтобы выровнять содержимое в таблице HTML, используют к тегу <td> атрибут «align» и «valign» :
ALIGN – горизонтальное выравнивание содержимого в таблице.
Значения:
- left— прижать содержимое к левой части (по умолчанию);
- center– установить по центру;
- right— прижать содержимое к правой части
VALIGN – вертикальное выравнивание содержимого в таблице.
Значения:
- top– прижать содержимое к верху;
- bottom– прижать содержимое к низу;
- middle– установить содержимое посередине
| ячейка по умолчанию | содержимое выравниваем горизонтально по правому краю, вертикально — прижимаем к низу |
| содержимое выравниваем горизонтально по левому краю, вертикально — прижимаем к верху | содержимое выравниваем горизонтально по центру, вертикально — прижимаем посредине |
○ Как выровнять таблице HTML по центру
Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом <center></center> :
Дополнительные и основные теги к таблице
| Тег | Описание |
| <table> | Родительский тег таблиц (основной) |
| <thead> | Тег строк заголовка таблицы (дополнительный) |
| <tr> | ряд таблицы (основной) |
| <td> | Ячейка (столбик) таблицы (основной) |
| <th> | Ячейка заголовка таблицы Должен использоваться внутри тега <thead> (дополнительный) |
| <caption> | Описание или краткое содержание таблицы (дополнительный) |
| Название 1 | Название 2 |
|---|---|
| 1 | 2 |
Вот и закончили с таблицами. Вы теперь сможете самостоятельно создать таблицу любой сложности. Закрепите данный урок. Попробуйте самостоятельно создать любую таблицу.
Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.
Backgroung image for a table
How can we integrate a picture as a background image for a table..
4 Answers 4
Are you asking how to assign a background image to a table? Like for any other HTML element.
see that page for the additional parameters background-repeat and background-position .
following on from Pekka’s example.
would let you put a background image in each cell
if you applied a class attribute to the <td > you could then add a custom background to individual cells.
inline css like — style=»background-image: url(your_image.gif);» — is not quite good.
in my opinion best way to put bg to table is ;
html : table > tr > td.wide
This site is temporarily in read-only mode and not accepting new answers.
-
The Overflow Blog
Related
Most asked in [html]
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.3.11.43300
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Таблица HTML. Всё о таблицах
Полное руководство по таблицам HTML Примеры и код, теги и атрибуты, конструкции и размеры, фоновые изображения и картинки, скрипты и формы в таблицах HTML.
Таблицы HTMl — очень интересный элемент.
С их помощью и благодаря их свойствам таблицы применяются не только для оформления различных прайсов и сводов, но и для создания более сложных вещей.
Например, до появления CSS, все сайты верстались таблицами в несколько слоёв. Пример многослойной таблицы: Код сайта на чистом HTML.
Таблица может состоять из множества слоёв, в неё, при желании, вставляются изображения и скрипты, а с появлением CSS возможности оформления таблиц ещё расширились.
Поэтому давайте разберём, как эти таблицы создаются с самого начала.
Для создания таблицы применяются теги:
<table></table> — контейнер таблицы
<tr></tr> — строчки таблицы
<th></th> — столбики таблицы
<td></td> — ячейки таблицы
<thead></thead>, <tbody></tbody>, <tfoot></tfoot> — группируют несколько строк (tr) таблицы, для придания им общего оформления, применяются в основном для вёрстки сайта, допускается использовать каждый тег только один раз в указанной последовательности.
Код таблицы записывается следующим образом:
Вручную, при таких повторениях, пишется только первая пара тегов.
Всё остальное делается при помощи копирования, так что если кто ещё не научился, тренируйтесь виртуозно копировать. Пригодится.
Внесём данные в теги th и td
Вот что отобразится в браузере.
Уже можно понять что это таблица, но не доработанная.
Раньше для создания рамки и прочих наворотов применялись атрибуты таблицы, но со временем они постепенно устаревают и теряют поддержку браузерами.
Тем не менее некоторые из них ещё работают, правда не знаю на долго-ли, поэтому я укажу их название и назначение, но дальнейшее оформление таблицы, будем рассматривать в основном с помощью CSS.
Тем более, что возможности css в создании красивых и нестандартных таблиц не сравнимо больше тех, что могут предоставить атрибуты.
1. width — ширина таблицы.
2. frame — создаёт границы вокруг таблицы.
3. align — выравнивание таблицы на странице.
4. border — создаёт рамку таблицы и ячеек.
5. bordercolor — цвет рамки.
6. bgcolor — цвет фона таблицы.
7. background — фоновый рисунок в таблице.
8. cellpadding — расстояние между рамкой и содержимым ячейки.
9. cellspacing — расстояние между ячейками.
10. rules — отменяет действие атрибута cellspacing.
11. summary — краткое описание таблицы
12. cols — указывает число столбцов, чем ускоряет загрузку таблицы.
13. colspan — объединяет ячейки по горизонтали.
14. rowspan — объединяет ячейки по вертикали.
Атрибуты указывают на определённое действие.
Чтобы конкретизировать это действе, атрибуту приписывается значение, но рассматривать его мы в данной статье не будем, по причине указанной выше.
Прежде чем перейти к оформлению таблицы, должен предупредить.
Если ваш сайт управляется CMS, то в стилях шаблона скорее всего уже задано оформление таблиц, и если что-то менять, то начинать это делать нужно будет в файле style.css.
Стили для таблиц можно вводить как в файл style.css, так и непосредственно в тег <table>, и другие теги таблицы.
В файле стилей обычно задаются свойства, которые будут приемлимы для всех таблиц расположенных на страницах сайта.
Это отступы от других элементов страницы, выравнивание содержания ячеек по центру, способ отображения границ таблицы.
А различные красивости, такие как цвет рамок, фоновая подкраска таблицы, некоторых колонок или строк, фоновые изображения, семейства шрифтов, лучше делать прямым включением в тег <table> с помощью атрибута style.
В чём отличие атрибута style от тега style можно узнать в статье Style html тег и атрибут
Можно все параметры задать в файле — это проще, но тогда и все таблицы сайта будут иметь абсолютно одинаковый вид.
Рассмотрим по порядку.
может быть задана во всех доступных в web единицах размеров.
Высота таблицы не задаётся, так как определяется количеством строк содержания ячеек.
< table style color: #008080;»>width: 100%; «>. < /tabl e>
Границы и рамки таблицы .
Рамки и границы — основной элемент таблиц. Задаётся свойством css border .
Свойством border можно создать как рамку вокруг элемента, так и границу по сторонам элемента.
Для этого в название добавляется указание стороны, с которой будет отображаться граница: border-left, border-right, border-top, border-bottom .
Отсюда — рамку можно сделать как вокруг всей таблицы и каждой ячейки, так и в виде строчных или столбцовых ограничений, или границ по сторонам таблицы.
Внешний вид рамки задаётся значениями. Как это делается смотрите в статьях Создание рамок средствами CSS и Рамки html
table <
border : 2px solid #777 ;
>
< table style color: #008080;»>border: 2px solid #777; «>
.
< /table >
Теперь зададим рамку для каждой ячейки.
table <
border : 2px solid #777 ;
>
td, th <
border : 2px solid #777 ;
>
< table style color: #008080;»>border: 2px solid #777; «>
< tr >
< th style color: #008080;»>border:2px solid #777 ;»>Oдин< /th >
< th style color: #008080;»>border:2px solid #777 ;»>Два< /th >
< th style color: #008080;»>border:2px solid #777 ;»>Три< /th >
< th style color: #008080;»>border:2px solid #777 ;»>Четыре< /th >
< /tr >
< tr >
< td style color: #008080;»>border:2px solid #777 ;»>1< /td >
< td style color: #008080;»>border:2px solid #777 ;»>2< /td >
< td style color: #008080;»>border:2px solid #777 ;»>3< /td >
< td style color: #008080;»>border:2px solid #777 ;»>4< /td >
< /tr >
< tr >
< td style color: #008080;»>border:2px solid #777 ;»>1а< /td >
< td style color: #008080;»>border:2px solid #777 ;»>2а< /td >
< td style color: #008080;»>border:2px solid #777 ;»>3а< /td >
< td style color: #008080;»>border:2px solid #777 ;»>4а< /td >
< /tr >
< tr >
< td style color: #008080;»>border:2px solid #777 ;»>1b< /td >
< td style color: #008080;»>border:2px solid #777 ;»>2b< /td >
< td style color: #008080;»>border:2px solid #777 ;»>3b< /td >
< td style color: #008080;»>border:2px solid #777 ;»>4b< /td >
< /tr >
< tr >
< td style color: #008080;»>border:2px solid #777; «>1c< /td >
< td style color: #008080;»>border:2px solid #777; «>2c< /td >
< td style color: #008080;»>border:2px solid #777; «>3c< /td >
< td style color: #008080;»>border:2px solid #777; «>4c< /td >
< /tr >
< /table >
Как видите, у каждой ячейки появилась своя рамка, и у всех есть отступ друг от друга, который задаёт браузер по умолчанию.
Можно сделать рамки разной толщины и формы для каждой ячейки.
Если кажется, что прямое включение сложновато, то это только по началу.
А так всё просто — пишется только одна строка, всё остальное делается копированием. Меняются только данные в ячейках.
Чтоб убрать отступы и разделить ячейки таблицы одной линией, в тег table вводится свойство border-collapse со значением collapse
table <
border : 2px solid #777 ;
border-collapse : collapse ;
>
< table style color: #008080;»>border: 2px solid #777; border-collapse: collapse; «>
.
< /table >
Фон, цвет рамки, стиль шрифта
При прямом включении оформления можно каждой строке или столбцу, и даже каждой ячейке задать свой фон, шрифт, и т. д. и т.п., то есть сделать нестандартную и красивую таблицу, совершенно отличную от других.
А если убрать border-collapse , то будет так:
Выравнивание и отступы .
а) Выравнивание и отступы на странице .
Для выравнивания таблицы по центру страницы применяется свойство margin со значением auto
table <
margin : auto ;
>
< table style color: #008080;»>margin: auto; border:5px solid blue; border-collapse: collapse; «>
.
< /table >
Для выравнивания таблицы по краям страницы, в тег table вводится свойство float , которое принимает значения left или right .
При этом таблица позиционируется по левому или правому краю страницы, а находящийся ниже таблицы текст, обтекает её справа, или соответственно слева.
Причём, если текст заключён в блочный тег, то ему нужно нужно задать свойство display: inline; , иначе float:left; может не сработать.
table <
float : left ;
border : 5px solid blue ;
border-collapse : collapse ;
>
p <
display : inline ;
>
< table style color: #008080;»>float: left; border:5px solid blue; border-collapse: collapse; «>
.
< /table >
< p style color: #008080;»>display: inline; «>Бла-бла-бла-бла-Бла-бла-бла-бла
Бла-бла-бла-бла-Бла-бла-бла-бла
Бла-бла-бла-бла-Бла-бла
бла-бла< /p >
Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла-Бла-бла-бла-бла
Благодаря настройкам шаблона моего сайта, текст разместился на некотором удалении от таблицы. У вас этого отступа может не быть.
Для того чтоб задать внешние отступы от таблицы, применяется свойство margin .
Отступы указываются во всех доступных в web единицах длины.
Где первая цифра — отступ сверху.
Вторая цифра — отступ справа.
Третья цифра — отступ снизу.
Четвёртая цифра — отступ слева.
При использовании значения auto указываются только три значения
Первая цифра — отступ сверху.
auto — выравнивание по центру.
Третья цифра — отступ снизу.
б) Выравнивание и отступы внутри таблицы .
Верхняя строка таблицы, или содержание заключённое в тег th браузеры по умолчанию отображают жирным шрифтом и выравненным по центру ячейки.
Для наглядности я увеличу ширину таблицы.
table <
width : 350px ;
border : 5px solid blue ;
border-collapse : collapse ;
>
< table style color: #008080;»>width: 350px; border:5px solid blue; border-collapse: collapse; «>
.
< /table >
Для выравнивания содержания всех ячеек таблицы, применяется свойство text-align которому можно задать значения left, center, right.
Так как по умолчанию браузеры выравнивают текст по левому краю, то в основном используется center.
table <
text-align : center ;
width : 350px ;
border : 5px solid blue ;
border-collapse : collapse ;
>
< table style color: #008080;»>text-align: center; width: 350px; border:5px solid blue; border-collapse: collapse; «>
.
< /table >
По умолчанию браузер выбирает высоту ячеек по высоте содержимого с небольшим отступом.
Для увеличения этого отступа, и тем самым увеличения высоты ячеек и всей таблицы, применяется свойство padding .
Свойство padding вводится в теги th, td .
В значении указываются все доступные в web размеры длины.
table <
text-align : center ;
width : 350px ;
border : 5px solid blue ;
border-collapse : collapse ;
>
th, td <
padding : 10px ;
>
Если нужно сделать строки разной высоты, то свойство padding вводится прямым включением.
Причём достаточно задать необходимый отступ только одной ячейке, а все остальные выровняются по ней.
При этом нужно обязательно учитывать,что с учётом отступов, размеры ячеек по умолчанию регулируются размером содержания, и все ячейки и столбцы принимают размер наибольшей.
Объединение ячеек таблицы .
Объединение ячеек, пожалуй, единственная опция, которая выполняется только с помощью атрибутов.
Хотя выполнит её с помощь css можно, но это будет настолько заморочно, что атрибуты объединения ещё долго будут актуальны.
Атрибуты объединения ячеек применяются к тегам th, td .
Для объединения ячеек по горизонтали используется атрибут colspan , в значении которого указывается число объединяемых ячеек.
При объединении ячеек учитывайте, что при этом действии будут образовываться лишние ячейки, которые нужно будет удалить из кода.
Для объединения ячеек по вертикали применяется атрибут rowspan , в значении которого указывается число объединяемых ячеек.
Число и расположение объединяемых ячеек таблицы, конструируется в зависимости от поставленной задачи.
Фоновые изображения и картинки в таблицу .
Фоновое изображение в таблицу вставляется с помощью стилевого свойства background-image .
Фоновое изображение можно установить отдельно в любую ячейку таблицы, или в каждую ячейку своё фоновое изображение. Только прямым включением.
Для этого свойство background-image вводится в тег <td>.
| Oдин | Два | ||
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 2а | 3а | 4а | |
| 1b | 2b | 3b | 4b |
| 2c | 3c | 4c | |
Так-же в любую ячейку таблицы можно вставить картинку, не являющуюся фоновой. Только прямым включением.
Картинка вставляется как содержимое ячейки, между тегами <td></td>.
Чтобы картинка не сдвигала содержимое ячейки, делается следующее:
1. В тег <td> вводится стилевое свойство position:relative .
2. В тег <img> вводится стилевое свойство position:absolute , с указанием места для картинки top:0; left:0;
| Oдин | Два | ||
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 2а | 3а | 4а | |
| 1b | 2b | 3b | 4b |
| 2c | 3c | 4c | |
При желании можно вставить и фоновое изображение, и картинку поверх него.
Скрипт в таблицу .
Скрипты в таблицу вставляются вместе с содержанием ячейки, или вместо него.
Позиционируется скрипт так же как картинка.
Для примера вставим в таблицу скрипт текущего времени.
Сам скрипт можно взять вот здесь, и установить за пределами таблицы, в любом месте страницы, лучше в конце, а в таблицу устанавливается только html, css и скрипт запуска.
Если нет запуска, то можно установить скрипт полностью.
Формы обратной связи добавляются в таблицу так-же как скрипты и картинки.
Возможность многослойности таблицы HTML заключается в том, что в каждой ячейке можно разместить ещё одну или несколько таблиц.
Именно эта возможность в полной мере используется при табличной вёрстке сайта.
< table border color: #008080;»>1 » height color: #008080;»>100 » style color: #008080;»>width:100%; border-radius:5px; background: #7FFFD4 «>
< tr >
< td >1-я таблица в ячейке основной таблицы</ td >
</ tr >
</ table >
< table border color: #008080;»>1 » height color: #008080;»>300 » style color: #008080;»>width:100%; «>
< tr >
< td style color: #008080;»>width:80%; border-radius:5px; «>2-я таблица в ячейке основной таблицы. Первая ячейка</ td >
< td style color: #008080;»>width:20%; border-radius:5px; «>Вторая ячейка</ td >
</ tr >
</ table >
< table border color: #008080;»>1 » height color: #008080;»>100 » style color: #008080;»>width:100%; border-radius:5px; background: #7FFFD4 «>
< tr >
< td >3-я таблица в ячейке основной таблицы</ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
Это всё, что нужно знать про таблицы HTML.
Перемена
Отец провожает своего сына на курорт — тот едет впервые в жизни. Приехали с деревни на станцию на телеге, отец напутствует:
— Ну шо ж сынку. буть дуже внимательный. Там знаешь какие могут быть женщины коварные. Привезёшь домой заразу. Заразишь свою жену. Она — меня. Я — твою мать. А ты ж знаешь свою маму — вымрет всё село!