Таблица HTML. Всё о таблицах
Полное руководство по таблицам HTML Примеры и код, теги и атрибуты, конструкции и размеры, фоновые изображения и картинки, скрипты и формы в таблицах HTML.
Таблицы HTMl — очень интересный элемент.
С их помощью и благодаря их свойствам таблицы применяются не только для оформления различных прайсов и сводов, но и для создания более сложных вещей.
Например, до появления CSS, все сайты верстались таблицами в несколько слоёв. Пример многослойной таблицы: Код сайта на чистом HTML.
Таблица может состоять из множества слоёв, в неё, при желании, вставляются изображения и скрипты, а с появлением CSS возможности оформления таблиц ещё расширились.
Поэтому давайте разберём, как эти таблицы создаются с самого начала.
Для создания таблицы применяются теги:
— контейнер таблицы
— строчки таблицы
— столбики таблицы
— ячейки таблицы
, , — группируют несколько строк (tr) таблицы, для придания им общего оформления, применяются в основном для вёрстки сайта, допускается использовать каждый тег только один раз в указанной последовательности.
Код таблицы записывается следующим образом:
Вручную, при таких повторениях, пишется только первая пара тегов.
Всё остальное делается при помощи копирования, так что если кто ещё не научился, тренируйтесь виртуозно копировать. Пригодится.
Внесём данные в теги th и td
Вот что отобразится в браузере.
Уже можно понять что это таблица, но не доработанная.
Раньше для создания рамки и прочих наворотов применялись атрибуты таблицы, но со временем они постепенно устаревают и теряют поддержку браузерами.
Тем не менее некоторые из них ещё работают, правда не знаю на долго-ли, поэтому я укажу их название и назначение, но дальнейшее оформление таблицы, будем рассматривать в основном с помощью CSS.
Тем более, что возможности css в создании красивых и нестандартных таблиц не сравнимо больше тех, что могут предоставить атрибуты.
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 от тега style можно узнать в статье Style html тег и атрибут
Можно все параметры задать в файле — это проще, но тогда и все таблицы сайта будут иметь абсолютно одинаковый вид.
может быть задана во всех доступных в web единицах размеров.
Высота таблицы не задаётся, так как определяется количеством строк содержания ячеек.
Рамки и границы — основной элемент таблиц. Задаётся свойством css border .
Свойством border можно создать как рамку вокруг элемента, так и границу по сторонам элемента.
Для этого в название добавляется указание стороны, с которой будет отображаться граница: border-left, border-right, border-top, border-bottom .
Отсюда — рамку можно сделать как вокруг всей таблицы и каждой ячейки, так и в виде строчных или столбцовых ограничений, или границ по сторонам таблицы.
Внешний вид рамки задаётся значениями. Как это делается смотрите в статьях Создание рамок средствами CSS и Рамки html
table border : 2px solid #777 ;
>
Теперь зададим рамку для каждой ячейки.
table border : 2px solid #777 ;
>
td, th border : 2px solid #777 ;
>
Как видите, у каждой ячейки появилась своя рамка, и у всех есть отступ друг от друга, который задаёт браузер по умолчанию.
Можно сделать рамки разной толщины и формы для каждой ячейки.
Если кажется, что прямое включение сложновато, то это только по началу.
А так всё просто — пишется только одна строка, всё остальное делается копированием. Меняются только данные в ячейках.
Чтоб убрать отступы и разделить ячейки таблицы одной линией, в тег table вводится свойство border-collapse со значением collapse
table border : 2px solid #777 ;
border-collapse : collapse ;
>
Фон, цвет рамки, стиль шрифта
При прямом включении оформления можно каждой строке или столбцу, и даже каждой ячейке задать свой фон, шрифт, и т. д. и т.п., то есть сделать нестандартную и красивую таблицу, совершенно отличную от других.
А если убрать border-collapse , то будет так:
а) Выравнивание и отступы на странице .
Для выравнивания таблицы по центру страницы применяется свойство margin со значением auto
Для выравнивания таблицы по краям страницы, в тег 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 ;
>
Для выравнивания содержания всех ячеек таблицы, применяется свойство 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 .
В файле style.css
table background-image :url(images/168.png);
text-align : center;
border :5px solid blue;
width : 80%;
border-collapse : collapse;
>
Прямое включение
< table style color: #008080;">background-image:url(images/168.png);
text-align: center;
width: 80%;
border:5px solid blue;
border-collapse: collapse; «>
.
< /table >
Фоновое изображение можно установить отдельно в любую ячейку таблицы, или в каждую ячейку своё фоновое изображение. Только прямым включением.
| Oдин | Два | ||
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 2а | 3а | 4а | |
| 1b | 2b | 3b | 4b |
| 2c | 3c | 4c | |
Так-же в любую ячейку таблицы можно вставить картинку, не являющуюся фоновой. Только прямым включением.
Картинка вставляется как содержимое ячейки, между тегами .
Чтобы картинка не сдвигала содержимое ячейки, делается следующее:
2. В тег вводится стилевое свойство position:absolute , с указанием места для картинки top:0; left:0;
Прямое включение
< table style color: #008080;">text-align: center;
width: 80%;
border:5px solid blue;
border-collapse: collapse; «>
< tr >
< td rowspan color: #008080;">2 » style color: #008080;»>position:relative;
padding: 10px;
border:2px solid #00FF7F; «>
< img src color:green;">images/75.png »
style color: green;»>position:absolute; top:0; left:0; «>1< /td >
< td style color: #008080;">border:2px solid #00FF7F; «>2< /td >
< td style color: #008080;">border:2px solid #00FF7F; «>3< /td >
< td style color: #008080;">border:2px solid #00FF7F; «>4< /td >
< /tr >
.
< /table >
При желании можно вставить и фоновое изображение, и картинку поверх него.
Скрипты в таблицу вставляются вместе с содержанием ячейки, или вместо него.
Позиционируется скрипт так же как картинка.
Для примера вставим в таблицу скрипт текущего времени.
Сам скрипт можно взять вот здесь, и установить за пределами таблицы, в любом месте страницы, лучше в конце, а в таблицу устанавливается только html, css и скрипт запуска.
Если нет запуска, то можно установить скрипт полностью.
Прямое включение
< table style color: #008080;">text-align: center;
width: 80%;
border:5px solid blue;
border-collapse: collapse; «>
< tr >
< td rowspan color: #008080;">2 » style color: #008080;»>position:relative;
padding: 10px;
border:2px solid #00FF7F; «>
< span id color: green">doc_time » style color: green»>font-family: Arial;
color: #777;
font-style: italic;
font-size:12px;
position:absolute;
top:3px;
left:3px; «>< /span >
< script >clock();< /script >
1< /td >
< td style color: #008080;">border:2px solid #00FF7F; «>2< /td >
< td style color: #008080;">border:2px solid #00FF7F; «>3< /td >
< td style color: #008080;">border:2px solid #00FF7F; «>4< /td >
< /tr >
.
< /table >
Формы обратной связи добавляются в таблицу так-же как скрипты и картинки.
Возможность многослойности таблицы HTML заключается в том, что в каждой ячейке можно разместить ещё одну или несколько таблиц.
Именно эта возможность в полной мере используется при табличной вёрстке сайта.
< table border color: #008080;">1 » align color: #008080;»>center » style color: #008080;»>width:500px; padding:40px; margin-bottom:20px; background: #F4A460 «>
< tr >Основная таблица
< td style color: #008080;">border-radius:5px; background: #fff «>
< table border color: #008080;">1 » height color: #008080;»>100 » style color: #008080;»>width:100%; border-radius:5px; background: #7FFFD4 «>
< tr >
< td >1-я таблица в ячейке основной таблицы
< 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 style color: #008080;">width:20%; border-radius:5px; «>Вторая ячейка
< table border color: #008080;">1 » height color: #008080;»>100 » style color: #008080;»>width:100%; border-radius:5px; background: #7FFFD4 «>
< tr >
< td >3-я таблица в ячейке основной таблицы
Это всё, что нужно знать про таблицы HTML.
Перемена
Отец провожает своего сына на курорт — тот едет впервые в жизни. Приехали с деревни на станцию на телеге, отец напутствует:
— Ну шо ж сынку. буть дуже внимательный. Там знаешь какие могут быть женщины коварные. Привезёшь домой заразу. Заразишь свою жену. Она — меня. Я — твою мать. А ты ж знаешь свою маму — вымрет всё село!