Таблицы в html
Содержание:
- Промежуток между ячейками
- Вопросы и задачи по теме
- Выравнивание содержимого таблицы (по горизонтали и вертикали)
- Шапка, тело и подвал HTML таблицы.
- Генератор таблиц с цветом (HTML + CSS)
- Алгоритм размещения макета таблицы браузером
- Пустые ячейки
- Создание простой HTML таблички
- Атрибуты
- HTML Tags
- CSS Учебник
- Определение особого стиля для таблицы
- Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
- Чередование фонового цвета строк таблицы
- Заключение
- Заключение
Промежуток между ячейками
После рассмотренного выше примера, вы могли заметить, что у нас остался промежуток между всеми ячейками таблицы. Давайте рассмотрим, как убрать промежуток между ячейками таблицы, либо его увеличить.
Чтобы задать расстояние между границами соседних ячеек необходимо использовать свойство CSS — border-spacing.
<!DOCTYPE html>
<html>
<head>
<title>Изменение промежутка между таблицами</title>
<style>
table {
vertical-align: top; /* верх элемента выравнивается по верху самого высокого элемента */
float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */
margin-right: 30px; /* устанавливаем внешние отступы справа */
}
td, th {
border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
caption {
font-weight: bold; /* жирное начертание */
}
.first {
border-spacing: 30px 10px; /* промежуток между ячейками таблицы (первое значение - горизонтальный, второе вертикальный)*/
}
.second {
border-spacing: ; /* промежуток между ячейками таблицы отсутствует */
}
.third {
border-spacing: 0.2em; /* промежуток между ячейками таблицы (горизонтальный и вертикальный) */
}
</style>
</head>
<body>
<table class = "first">
<caption>border-spacing: 30px 10px;</caption>
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr>
<td>2</td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td>
</tr>
</table>
<table class = "second">
<caption>border-spacing: 0;</caption>
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr>
<td>2</td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td>
</tr>
</table>
<table class = "third">
<caption>border-spacing:0.2em;</caption>
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr>
<td>2</td><td></td><td></td>
</tr>
<tr>
<td>3</td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
- Сделали наши таблицы плавающими и сместили по левому краю (float: left). Если вы пропустили тему плавающих элементов, то вы всегда можете к ней вернуться в этом учебнике — «Плавающие элементы в CSS».
- Кроме того установили для таблиц внешний отступ справа равный 30px и установили вертикальное выравнивание таблиц (верх элемента выравнивается по верху самого высокого элемента). Мы еще вернемся к подробному рассмотрению этого свойства в этой статье.
- Установили для наименования таблицы (тег <caption>) – жирное начертание.
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
- Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы (свойство border-spacing) равный 30px 10px, для второй таблицы с классом .second равный нулю, для третей таблицы с классом .third равный 0.2em.
Обращаю Ваше внимание, что если в свойстве border-spacing указано только одно значение длины, то оно указывает интервалы, как по горизонтали, так и вертикали, а если указаны два значения длины, то первое определяет горизонтальное расстояние, а второе вертикальное.
Расстояние между границами соседних ячеек допускается указывать в единицах измерения CSS (px, cm, em и др). Отрицательные значения не допускаются
Результат нашего примера:
Рис. 145 Пример изменения промежутка между таблицами.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
Используя полученные знания составьте следующие таблицы:
Практическое задание № 12.
Подсказка: заголовочные ячейки могут распологаться не только горизонтально, но и вертикально.
В следующей таблице вам необходимо объединить строки как показано на изображении:
Практическое задание № 13.
Практическое задание № 14.
Подсказка: возможно вам придется повторить статью «Стили в HTML», косую черту можно задать с использованием спецсимвола, найти его вы можете традиционно в этом разделе.
В следующей таблице вам необходимо стилизовать столбцы в соответствии с изображением:
Практическое задание № 15.
Практическое задание № 16.
Если у Вас есть затруднения в выполнении какого-либо задания, то проинспектируйте код страницы, открыв пример в отдельном окне кликнув по изображению.
Цвета
Комментарии и якоря
Выравнивание содержимого таблицы (по горизонтали и вертикали)
Выравнивать содержимое таблицы, строки или ячейки можно как по горизонтали (по верхнему краю, по середине, по нижнему краю), так и по вертикали (по левому краю, по средине, по правому краю).
И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.
Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).
Для нашей шапки установим выравнивание по центру, по середине.
<TR ALIGN="CENTER" VALIGN=”MIDDLE”>
Также выровняем содержание ячеек с нумерацией и телефонами по центру.
<HTML> <HEAD> <TITLE>Телефонный справочник </TITLE> </HEAD> <BODY> <P ALIGN="CENTER"> <TABLE BORDER=1 BorderCOLOR=”#006600” width="400" BGCOLOR="#FFFFCC"> <TR BGCOLOR=”#99CC33” HEIGHT="50" VALIGN="MIDDLE" ALIGN="CENTER"> <TD WIDTH="50">№</TD> <TD>Фамилия</TD> <TD>Номер телефона</TD> </TR> <TR> <TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>1</TD> <TD>Фрося Бурлакова</TD> <TD ALIGN="CENTER">8-952-987-13-20</TD> </TR> <TR> <TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>2</TD> <TD>Иван Петров</TD> <TD ALIGN="CENTER">8-918-964-70-11</TD> </TR> <TR> <TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>3</TD> <TD>Афоня Ивлев</TD> <TD ALIGN="CENTER">8-961-594-12-45</TD> </TR> </TABLE> </P> </BODY> </HTML>
В браузере увидим:
Шапка, тело и подвал HTML таблицы.
Как и сам сайт, наша табличка может иметь свои шапку, тело и подвал. И если вы хотите, чтобы ваш код выглядел семантически правильно для поисковых систем. Советую применять эти знания на практике.
Все 3 тега, которые мы будем изучать далее, должны содержать в себе весь контент таблицы. Который условно мы можем разбить на три большие части.
Тег thead — шапка HTML таблицы
Этот тег рекомендуется размещать первым в контенте таблицы. То есть мы заводим этот тег и уже внутри него размещаем заголовочную строку с ячейками.
Фишки тега thead:
- Он должен встречаться только один раз на одну таблицу!
- Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в начале таблицы.
Теперь вернёмся к нашей таблице, и давайте первую строку завернём в этот тег:
<table>
<caption>Тег thead в таблице</caption>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
</thead>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка3</td>
</tr>
</table>
Визуально он никак не влияет на отображение таблицы, поэтому я не буду выводить результат исполнения кода.
Тег tfoot – подвал HTML таблицы
Хоть это и подвальчик, но помните, что этот тег рекомендуется размещать сразу после тега
.
Фишки тега tfoot:
- Он должен встречаться только один раз на одну таблицу!
- Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в конце таблицы.
Давайте мы заведём ещё одну строку в таблице, и завернём её с ячейками сразу в тег
:
<table>
<caption>Тег tfoot в таблице</caption>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Подвал столбец 1</td>
<td>Подвал столбец 2</td>
<td>Подвал столбец 3</td>
<td>Подвал столбец 4</td>
</tr>
</tfoot>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка3</td>
</tr>
</table>
А вот и наша табличка:
| Столбец 1 | Столбец 2 | Столбец 3 | Столбец 4 |
|---|---|---|---|
| Подвал столбец 1 | Подвал столбец 2 | Подвал столбец 3 | Подвал столбец 4 |
| Строка2 Ячейка1 (соединена с ячейками 2 и 3) | Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4) | ||
| Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4) | Строка3 Ячейка3 | ||
| Строка4 Ячейка3 |
Посмотрите внимательно, несмотря на то, что мы разместили тег
в середине таблицы, его содержимое выводится в её конце!
Тег tbody – тело таблицы.
В отличии от первых двух – этот тег может встречать в таблице сколько угодно раз. Фишек у него никаких нет. Он просто семантически указывает для поисковых роботов, что в нём идёт контент таблицы.
Вот такой код получится в итоге:
<table>
<caption>Тег tbody в таблице</caption>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<th>Столбец 4</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Подвал столбец 1</td>
<td>Подвал столбец 2</td>
<td>Подвал столбец 3</td>
<td>Подвал столбец 4</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
<td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
<td>Строка3 Ячейка3</td>
</tr>
<tr>
<td>Строка4 Ячейка3</td>
</tr>
</tbody>
</table>
Внешне, наша таблица никак не изменилась! Поэтому и приводить её я здесь не буду.
И как обычно, для закрепления материала на практике, советую Вам глянуть видео №3.
Видео 3. HTML таблицы – шапка, тело и подвал
Кроме разбора на практике самих тегов, в этом видео, дополнительно, вы увидите, как оформить шапку, контент и подвал таблицы при помощи стилей.
Генератор таблиц с цветом (HTML + CSS)
Замечательный конструктор, в котором можно быстро создать таблицу html + css в цвете и вставить в блог. Пример вы видите:
| Заголовок | ||
|---|---|---|
| Первый столбец | Второй столбец | Третий столбец |
| 1 | 2 | 34 |
| 1 | 23 | 11 |
| 456 | 44 | 456 |
Этот генератор англоязычный, но в нем вы без труда разберетесь и научитесь создавать красивые таблицы с различным оформлением – это и в цвете, и с шапкой, объединять ячейки, изменять шрифт и выравнивать текста и многое другое.
Как работать в сервисе
В верхней части генератора – меню. Привожу на скриншоте ниже перевод основных команд:
Начинаем создание таблицы с выбора пунктов меню File –> New table
, где rows – количество строк, а columns – число столбцов. Кнопка – Create (создать). Далее начинаем заполнять и редактировать. Кликаем двойным щелчком в нужной ячейки – появляется курсов – пишем текст. Выделяем ячейки и нажимаем на кнопку Merge, как показано ниже – объединяем ячейки. Так можно создать шапку:
Обратный процесс разделения ранее объединенных ячеек осуществляется кнопкой Split. Делаем яркой таблицу, изменяем цвет текст и фона с помощью кнопок оформления. Перевод команд ниже:
кликните для увеличения После того, как нас устроит результат, нажмите кнопку Generate (генерировать), скопируйте код html+css и вставьте в сообщение блога в режиме html.
Алгоритм размещения макета таблицы браузером
В CSS по умолчанию используется алгоритм автоматического размещения макета таблицы браузером. В этом случае ширина столбца задается самым широким неразрывным содержимым ячейки. Данный алгоритм может быть в некоторых случаях медленным, так как браузер должен прочитать все содержимое в таблице, прежде чем определить её окончательный макет.
Чтобы изменить тип размещения макета таблицы браузером с автоматического на фиксированный, необходимо использовать CSS свойство table-layout со значением fixed.
В этом случае горизонтальное размещение зависит только от ширины таблицы и ширины столбцов, а не от содержимого ячеек. Браузер начинает отображать таблицу сразу после того, как получена первая строка. Как следствие, фиксированный алгоритм, позволяет создавать макет такой таблицы быстрее, чем используя автоматический вариант. При работе с большими таблицами в целях увеличения производительности вы можете использовать фиксированный алгоритм.
Давайте рассмотрим применение этого свойства на следующем примере:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства table-layout</title>
<style>
table {
width: 50%; /* задаем ширину таблицы */
word-wrap: break-word; /* слово может быть прервано в произвольном месте */
}
td, th {
border: 1px solid Chocolate; /* задаем сплошную границу размером 1 пиксель цвета шоколад */
}
.test {
table-layout: auto; /* автоматический алгоритм размещения макета таблицы браузером (по умолчанию) */
}
.test2 {
table-layout: fixed; /* фиксированный алгоритм размещения макета таблицы браузером */
}
</style>
</head>
<body>
<table class = "test">
<caption>table-layout: auto;</caption>
<tr>
<th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th>
</tr>
<tr>
<td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td>
</tr>
</table>
<table class = "test2">
<caption>table-layout: fixed;</caption>
<tr>
<th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th>
</tr>
<tr>
<td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td>
</tr>
</table>
</body>
</html>
В данном примере мы:
К одной и той же таблице применили различные алгоритмы размещения макета таблицы браузером. Для первой таблицы мы использовали автоматический алгоритм (auto)
Обратите внимание, что при этом размер таблицы стал больше заданного значения в 50% от родительского элемента (произошло переполнение).
Кроме того мы использовали для таблиц новое для вас свойство word-wrap, которое указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). Значение break-word указывает, что слово может быть прервано в произвольном месте, если нет допустимой точки для разрыва.
Для второй таблицы был использован фиксированный алгоритм (fixed) размещения макета таблицы браузером
Как вы можете заметить размер таблицы соответствует заданным нами значениям ширины в процентах, а числа прерваны в произвольных местах, чтобы не произошло переполнение. Если бы мы не использовали свойство word-wrap, то ширина второй таблицы бы не изменилась, но числа переполнили бы ячейки (вышли из ячеек).
Рис. 151 Пример использования свойства table-layout.
Пустые ячейки
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причём пробел в расчёт не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.
Старые браузеры не отображали цвет фона пустых ячеек вида <td bgcolor=»#ffcc00″></td>, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил однопиксельный прозрачный рисунок. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.
К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.
Для управления видом пустых ячеек используется свойство empty-cells, при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:
- нет вообще никаких символов;
- в ячейке содержится только перевод строки, символ табуляции или пробел;
- значение visibility установлено как hidden.
Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10).
Пример 2.10. Пустые ячейки
XHTML 1.0CSS 2.1IECrOpSaFx
Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.
а. В браузере Safari, Firefox, Opera, IE8, IE9
б. В браузере IE7
Создание простой HTML таблички
Прежде всего нам необходимо указать тег table. Это парный тег, который указывает браузеру, что именно в нём будет располагаться вся HTML таблица.
<table></table>
Но использование одного этого тега мало, ведь таблицу ещё надо наполнить. И там тоже есть свои правила, которые надо неукоснительно соблюдать.
Как вы знаете, в каждой таблице есть свои строки и колонки, которые на пересечении формируют ячейки. Однако в HTML – таблицы строятся немного по другому принципу. Изначально мы задаём им строки, а внутри строк задаём ячейки. И именно от количества ячеек в строке и будет завесить количество столбцов. Давайте попробуем сделать таблицу в html в блокноте.
Создание строк и ячеек
Строки задаются при помощи тегов tr. И внутри строк мы задаём ячейки тегами td. А сейчас мы по-быстрому забабахаем простую таблицу, с одной строкой и четырьмя ячейками. Вот её код:
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
Как видите, у нас получилась простая таблица, с одной строкой и четырьмя ячейками, которые автоматически преобразуются в 4 столбца.
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
А сейчас я предлагаю немного её усложнить, и добавить ещё три строки!
<table>
<tr>
<td>Строка1 Ячейка1</td>
<td>Строка1 Ячейка2</td>
<td>Строка1 Ячейка3</td>
<td>Строка1 Ячейка4</td>
</tr>
<tr>
<td>Строка2 Ячейка1</td>
<td>Строка2 Ячейка2</td>
<td>Строка2 Ячейка3</td>
<td>Строка2 Ячейка4</td>
</tr>
<tr>
<td>Строка3 Ячейка1</td>
<td>Строка3 Ячейка2</td>
<td>Строка3 Ячейка3</td>
<td>Строка3 Ячейка4</td>
</tr>
<tr>
<td>Строка4 Ячейка1</td>
<td>Строка4 Ячейка2</td>
<td>Строка4 Ячейка3</td>
<td>Строка4 Ячейка4</td>
</tr>
</table>
Выглядеть она у нас будет вот так:
| Строка1 Ячейка1 | Строка1 Ячейка2 | Строка1 Ячейка3 | Строка1 Ячейка4 |
| Строка2 Ячейка1 | Строка2 Ячейка2 | Строка2 Ячейка3 | Строка2 Ячейка4 |
| Строка3 Ячейка1 | Строка3 Ячейка2 | Строка3 Ячейка3 | Строка3 Ячейка4 |
| Строка4 Ячейка1 | Строка4 Ячейка2 | Строка4 Ячейка3 | Строка4 Ячейка4 |
Кода получилось довольно много, однако оно того стоило! Думаю, теперь вам ясно, как работает создание таблиц в HTML. Однако это далеко не всё, мы ещё с вами только начали и дальше нас ждёт еще много интересного
Название таблицы — тег caption
Давайте мы немного модернизируем табличку и добавим ей небольшое название. Это делается при помощи тега caption. Этот тег надо размещать самым первым, сразу после открывающего тега table. Вот как это выглядит в коде:
<table>
<caption>Пример таблицы с названием</caption>
<tr>
<td>Строка1 Ячейка1</td>
<td>Строка1 Ячейка2</td>
<td>Строка1 Ячейка3</td>
<td>Строка1 Ячейка4</td>
</tr>
<tr>
<td>Строка2 Ячейка1</td>
<td>Строка2 Ячейка2</td>
<td>Строка2 Ячейка3</td>
<td>Строка2 Ячейка4</td>
</tr>
<tr>
<td>Строка3 Ячейка1</td>
<td>Строка3 Ячейка2</td>
<td>Строка3 Ячейка3</td>
<td>Строка3 Ячейка4</td>
</tr>
<tr>
<td>Строка4 Ячейка1</td>
<td>Строка4 Ячейка2</td>
<td>Строка4 Ячейка3</td>
<td>Строка4 Ячейка4</td>
</tr>
</table>
А вот, что у нас получится в итоге:
| Строка1 Ячейка1 | Строка1 Ячейка2 | Строка1 Ячейка3 | Строка1 Ячейка4 |
| Строка2 Ячейка1 | Строка2 Ячейка2 | Строка2 Ячейка3 | Строка2 Ячейка4 |
| Строка3 Ячейка1 | Строка3 Ячейка2 | Строка3 Ячейка3 | Строка3 Ячейка4 |
| Строка4 Ячейка1 | Строка4 Ячейка2 | Строка4 Ячейка3 | Строка4 Ячейка4 |
Как видите, несмотря на то, что мы разместили тег
внутри таблицы. Он располагается над ней.
Для закрепления материала на практике, я рекомендую вам посмотреть создание базовой таблички в видео ниже.
Атрибуты
Естественно такая вещь как таблицы не может обойтись без специальных атрибутов и я вам покажу некоторые из них.
Граница (border)
Ну и начать бы я хотел с того, о чем говорил выше, то бшь о границах. По умолчанию их нет, поэтому таблица выходит невзрачной и не совсем понятной. Но это можно исправить, и поможет нам в этом атрибут border, который ставится непосредственно в открывающий тег <table>. Сделайте так, как я показал вам в примере ниже, то есть поставьте значение атрибута border=»1″.
После того, как вы сделаете это, сохраните результат и запустите документ. Ну что? Совсем ведь другое дело. Теперь таблица приобрела нормальные очертания и выглядит как надо. Вы можете поэкспериментировать с различными значениями бордера и посмотреть, что в вашем конкретном случае наиболее вам подойдет.
Отступ и расстояние (cellpadding и cellspacing)
Совершенно естественно, что одно отображение таблицы на все случаи жизни устроит не всех. Но мы можем это немного изменить, благодаря двум похожим атрибутам.
Cellpadding=»« — изменяет расстояние от самой рамки до содержимого в ячейке. Тем самым все ячейки в таблице становятся больше. Давайте напишем этот атрибут в таблице, а значение поставим равное 5, и посмотрим чем оно будет отличаться от первоначального варианта.
Хоп. Видите? Расстояние увеличилось. таким образом вы сможете сами подставлять нужные значения, расширяя тем самым ячейки.
Cellspacing=»» — изменяет расстояние между ячейкми таблицы и его значения также измеряются с пикселях. Давайте попробуем также поставить этот атрибут со значением равным 5 и увидим, что из этого получится.
Ну что? Суть ясна? Как видите, расстояние между ячейками стало шире. Именно этого мы с вами и добивались.
Выравнивание (Align)
Ну куда же мы без этого замечательного атрибута, который позволяет нам выровнять всё по разным местам? Align работает точно также, как и с другими тегами, которые мы проходили ранее и имеет три значения:
- Left
- Center
- Right
Давайте пропишем каждое из значений и посмотрим, как будет распределяться таблица.
Ну что? Вроде всё работает и я думаю, что должно быть понятно. Но если возникают какие-либо вопросы, то вы не стесняйтесь, спрашивайте.
Ну вот в принципе и всё, что я хотел рассказать сегодня о таблицах. Надеюсь, что вам всё было понятно. Ну а если вы хотите подробно изучить все тонкости работы с HTML и CSS и научиться верстать сайты самостоятельно, то я вам настоятельно рекомендую посмотреть превосходнейший видеокурс на данную тему. Для новичка это самый понятный, как по мне, видеокурс, в котором вам просто всё разжуют и разложат по полочкам.
Ну а я свой урок на сегодня завершаю. Не забывайте подписываться на обновления моего блога, чтобы не пропустить какую-либо важную информацию или новости. А мы с вами увидимся в других статьях. Удачи вам и пока-пока!
HTML Tags
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
CSS Учебник
CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности
Определение особого стиля для таблицы
Чтобы определить специальный стиль для таблицы, достаточно добавить ей уникальный идентификатор, т.е атрибут id:
<table id=»t01″>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
|
1 |
<table id=»t01″> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> |
И сейчас мы можем задать стиль для этого идентификатора:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
|
1 |
table#t01 { width100%; background-color#f1f1c1; } |
Немного поясню пример. Создав еще одну таблицу с идентификатром
id=t01 мы задали заливку цветом.
Теперь они отличаются по цвету.
А теперь для нас может встать такая задача, что заголовок должен быть одного цвета, все четные строки и нечетные также должны различаться по цветам. Для этого мы применим псевдоклассы для строк в таблице (тег
<tr> ):
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
|
1 |
table#t01 tr:nth-child(even) { background-color#eee; } table#t01 tr:nth-child(odd) { background-color#fff; } table#t01 th { colorwhite; background-colorblack; } |
За все четные строки отвечает псевдокласс
nth-child(even)
За все нечетные строки
nth-child(odd)
Как мы видим использование псевдоклассов задает особый стиль для всей нашей таблицы. Представляете если строк в ней будет больше 30, 40, а нам необходимо ее красиво оформить. Вот тут-то и поможет использование данных псевдоклассов.
Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
тега tablewidth — ширина таблицы. может быть в пикселях или % от ширины экрана.bgcolor — цвет фона ячеек таблицыbackground — заливает фон таблицы рисункомborder — рамка и границы в таблице. Толщина указывается в пикселяхcellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей
<table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей -->
без крайне редко применяемых тегов caption и thborder (граница)width (ширина таблицы, строки или ячейки)bgcolor (цвет ячейки)
<html> <head> <title>Таблица html</title> </head> <body> <table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей --> <tr bgcolor="Gainsboro"> <!-- Задаём цвет ячеек для всей первой строки --> <td> Стобец 1 </td> <td> Стобец 2 </td> </tr> <tr> <td> Текст в первой ячейке первого столбца </td> <td> Текст во второй ячейке второго столбца </td> </tr> </table> </body> </html>
frame — атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:
void — рамки нет,
above — только верхняя рамка,
below — только нижняя рамка,
hsides — только верхняя и нижняя рамки,
vsides — только левая и правая рамки,
lhs — только левая рамка,
rhs — только правая рамка,
box — все четыре части рамки.rules — атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:
none — между ячейками нет границ,
groups — границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows — границы только между строками,
cols — границы только между стобцами,
all — отображать все границы.
<html> <head> <title>Таблица html</title> </head> <body> <table border="1" width="300" frame="void" rules="rows"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей. Внешней рамки нет. Есть граница между строками --> <tr bgcolor="Gainsboro"> <!-- Задаём цвет ячеек для всей первой строки --> <td> Стобец 1 </td> <td> Стобец 2 </td> </tr> <tr> <td> Текст в первой ячейке первого столбца </td> <td> Текст во второй ячейке второго столбца </td> </tr> </table> </body> </html>
| Поскольку атрибутом border теперь редко пользуются, то и я Вам рекомендую не привыкать к нему и следующие примеры будут без указания границ. |
выравнивание в таблицеalign — выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)cellspacing — расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
<html> <head> <title>Таблица html</title> </head> <body> <table width="400" align="center" cellspacing="5" cellpadding="10"> <!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей --> <tr bgcolor="Gainsboro"> <!-- Задаём цвет ячеек для всей первой строки --> <td> Стобец 1 </td> <td> Стобец 2 </td> </tr> <tr> <td> Текст в первой ячейке первого столбца </td> <td> Текст во второй ячейке второго столбца </td> </tr> </table> </body> </html>
Внимание! Если не указывать ширину таблицы или ячейки, не задавать отступы и выравнивания, то ширина таблицы будет строиться по содержимому — границы будут примыкать к словам, а ширина будет выбираться автоматически.
Чередование фонового цвета строк таблицы
При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
table {
width: 70%;
border-collapse: collapse;
}
td, th {
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
th {
text-align: left;
padding: 5px;
background-color: #A7C942;
color: #fff;
}
.alt td { background-color: #EAF2D3; }
</style>
</head>
<body>
<table>
<tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
<tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
<tr class="alt"><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
<tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
<tr class="alt"><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
</table>
</body>
</html>
Попробовать »
Добавлять атрибут к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: (четные) или (нечетные):
tr:nth-child(odd) { background-color: #EAF2D3; }
Попробовать »
Заключение
Заключение
Среди положительных характеристик полиамида отмечают его прочность и эластичность. Волокно толщиной в человеческий волос выдерживает нагрузку порядка 1, 5 килограммов. Ткань не горит при высокой температуре, лишь плавится, отличается устойчивостью к солнечным лучам. Полиамид не выгорает, и на протяжении длительного времени он не теряет своей первоначальной окраски.
Среди отличительных параметров полиамида также можно отметить стойкость к грибку, морской соли, щелочам. Материал не садится, не мнется, его легко стирать, он прост в эксплуатации, обладает привлекательным внешним видом.
Помимо положительных эксплуатационных характеристик, полиамидный материал имеет и определенные недостатки. Волокно не способно впитывать влагу, отличается низкой гигроскопичностью. Так как полиамидный материал не охлаждает и не греет, тело в нем «не дышит». Материал способен накапливать статическое электричество, он сложен в раскрое.
