Каждый современный человек владеет ноутбуком, но как самому убрать возникающие...
![Пропал звук на ноутбуке — что делать?](https://i0.wp.com/sovets.net/photos/uploads/120/8110495-2razrabotanyi-spetsialnyie-programmyi-kotoryie-testiruyut-audio-drayveryi-soundcheck.jpg)
Многие веб мастера уверены, что использовать HTML таблицы в шаблонах - плохая практика. Но в данном уроке мы рассмотрим только таблицы CSS. Какая разница между таблицами HTML и CSS? Надо ли использовать таблицы CSS? Если да, то как?
Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению.
Основными элементами структуры являются строки. Строка определяется явно, а столбцы зависят от того, как заданы строки и ячейки.
Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS.
Каждый элемент таблицы HTML имеет эквивалент в CSS. Единственное отличие заключается в отсутствии отличий между td и th в варианте CSS.
Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS.
Table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption }
Подписи могут быть размещены сверху или снизу таблицы с помощью свойства caption-side:
#caption {caption-side: top} #caption {caption-side: bottom}
Несложно догадаться, как создать таблицу CSS опираясь на приведенный список. Вот пример таблицы.
#table {display: table;} .row {display: table-row;} .cell {display: table-cell;}
Если посмотреть на код HTML примера, то можно легко различить структуру таблицы (используются элементы div и span с классами и ID вместо table , td и tr).
Совсем небольшой код CSS представляет элементы div и span в виде таблицы.
В дополнение к выше приведенным свойствам модель таблицы CSS включает значение inline-table , которая определяет новую таблицу как и display: table , но в рамках контекста встроенного в HTML код формата.
Так как ячейки таблицы являются потомками строк таблицы, то для формирования столбцов имеет смысл использовать некоторые свойства. Модель таблицы CSS позволяет применять следующие свойства для столбцов и их группировки:
Различные элементы таблицы имеют разный уровень в стеке для обеспечения возможности использования разных фонов на разных слоях.
Данные слои можно посмотреть на представленном рисунке.
Фон слоя будет виден только если выше лежащий слой имеет прозрачный фон.
Это отличный способ для вывода пустых ячеек действительно пустыми с помощью использования прозрачного фона для них, через который будет видно строку, столбец или таблицу.
Ширина таблицы CSS может быть вычислена с помощью одно из двух алгоритмов . Алгоритм выбирается с помощью свойства table-layout и двух значений:
Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML.
Если вы явно определяете ширину таблицы, то следует использовать фиксированную модель расчета ширины.
По умолчанию высота ячейки устанавливается минимально необходимой для вывода содержания. Но вы можете явно определить высоту ячейки. Все ячейки в строке будут иметь высоту ячейки с максимальным значением.
Свойство vertical-align определяет выравнивание содержания в строке
Последняя группа значений применяется не для ячеек, а для текста в них. Ячейки в данном случае будут выравниваться в соответствии со значением baseline .
Есть три интересных свойства для рамок таблиц:
Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа.
Если рассмотреть использование таблиц HTML в сравнении с комбинацией элементов div и кода CSS, то выявляются следующие недостатки таблиц:
В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах.
CSS таблицы являются более семантическим решением, так как имеется четкое разделение структуры данных и представления внешнего вида.
Таблицы CSS достаточно просто освоить и использовать. Но они не имеют явных преимуществ перед таблицами HTML, за исключением более семантического кода.
Может быть практика использования покажет преимущества или недостатки таблиц CSS. Есть ли у вас опыт использования таблиц CSS в реальных проектах?
Стили браузера по умолчанию отображают таблицу и ее ячейки без видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу. С помощью CSS-стилей можно красиво оформить таблицу в соответствии с ее содержимым.
Таблицы с промежутками между строк помогают сконцентрироваться на связанной информации, расположенной в этой же строке таблицы, но в соседних ячейках. Для того, чтобы отделить текст от картинки, помещаем его в другую ячейку, объединив при этом две ячейки в заголовке таблицы
Разметка HTML
Стили CSS
table {
border-spacing: 0 10px;
font-family: "Open Sans", sans-serif;
font-weight: bold;
}
th {
padding: 10px 20px;
background: #56433D;
color: #F9C941;
border-right: 2px solid;
font-size: 0.9em;
}
th:first-child {
text-align: left;
}
th:last-child {
border-right: none;
}
td {
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
}
td:first-child {
border-left: 2px solid #56433D;
border-right: none;
}
td:nth-child(2){
text-align: left;
}
Используя такой прием, можно эффектно оформить таблицу при помощи контрастных цветов, которые гармонично впишутся в цветовую гамму вашего сайта.
Разметка HTML
Company | Q1 | Q2 | Q3 | Q4 |
---|---|---|---|---|
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Стили CSS
table {
font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
text-align: left;
}
Благодаря добавлению в спецификацию CSS3 свойства border-radius , появилась возможность закругления углов таблицы без использования фоновых изображений. Чтобы добиться такого эффекта, нужно закруглить углы соответствующих ячеек.
Разметка HTML
— аналогично с примером 2.
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
}
th {
background: #BCEBDD;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
th:first-child, td:first-child {
text-align: left;
}
th:first-child {
}
th:last-child {
border-right: none;
}
td {
padding: 10px 20px;
background: #F8E391;
}
tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
tr td:last-child {
border-right: none;
}
Разметка HTML
— аналогично с примером 2.
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
}
th {
font-size: 18px;
padding: 10px;
}
td {
background: #F5D7BF;
padding: 10px;
}
Разметка HTML
My working weeks, March 2015 | ||||
---|---|---|---|---|
Monday | Tuesday | Wednesday | Thursday | Friday |
2 | 3 | 4 | 5 | 6 |
9 | 10 | 11 | 12 | 13 |
16 | 17 | 18 | 19 | 20 |
23 | 24 | 25 | 26 | 27 |
30 | 31 |
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: center;
border-collapse: collapse;
border-spacing: 5px;
background: #E1E3E0;
border-radius: 20px;
}
th {
font-size: 22px;
font-weight: 300;
padding: 12px 10px;
color: #F56433;
}
tbody tr:nth-child(2) {
border-bottom: 2px solid #F56433;
}
td {
padding: 10px;
color: #8D8173;
}
Разметка HTML
Employee | Salary | Bonus | Supervisor |
---|---|---|---|
Stephen C. Cox | $300 | $50 | Bob |
Josephin Tan | $150 | — | Annie |
Joyce Ming | $200 | $35 | Andy |
James A. Pentel | $175 | $25 | Annie |
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
text-align: left;
border-collapse: collapse;
border-radius: 20px;
box-shadow: 0 0 0 10px #F2906B;
color: #452F21;
}
th {
padding: 10px 8px;
background: white;
}
table th:first-child {
border-top-left-radius: 20px;
}
table th:last-child {
border-top-right-radius: 20px;
}
td {
border-top: 10px solid #F2906B;
padding: 8px;
background: white;
}
table td:first-child {
border-bottom-left-radius: 20px;
}
table td:last-child {
border-bottom-right-radius: 20px;
}
Вертикальная зебра в оформлении таблицы позволит сделать акцент на столбцы, а эффект при наведении на строку добавит привлекательности такой таблице.
Разметка HTML
Q1 | Q2 | Q3 | Q4 | |
---|---|---|---|---|
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Стили CSS
table {
border-spacing: 0;
empty-cells: hide;
}
td {
padding: 10px 20px;
text-align: center;
transition: all 0.5s linear;
}
td:first-child {
text-align: left;
color: #3D3511;
font-weight: bold;
}
th {
padding: 10px 20px;
color: #3D3511;
border-bottom: 1px solid #F4EEE8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td:nth-child(even) {
background: #F6D27E;
}
td:nth-child(odd) {
background: #D1C7BF;
}
th:nth-child(even) {
background: #F6D27E;
}
th:nth-child(odd) {
background: #D1C7BF;
}
.round-top {
border-top-left-radius: 5px;
}
.round-bottom {
border-bottom-left-radius: 5px;
}
tr:hover td{
background: #D1C7BF;
font-weight: bold;
}
Разметка HTML
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
border-collapse: collapse;
color: #686461;
}
caption {
padding: 10px;
color: white;
background: #8FD4C1;
font-size: 18px;
text-align: left;
font-weight: bold;
}
th {
border-bottom: 3px solid #B9B29F;
padding: 10px;
text-align: left;
}
td {
padding: 10px;
}
tr:nth-child(odd) {
background: white;
}
tr:nth-child(even) {
background: #E8E6D1;
}
Разметка HTML
Comedy | Adventure | Action | Children |
---|---|---|---|
Scary Movie | Indiana Jones | The Punisher | Wall-E |
Epic Movie | Star Wars | Bad Boys | Madagascar |
Spartan | LOTR | Die Hard | Finding Nemo |
Dr. Dolittle | The Mummy | 300 | A Bug"s Life |
Стили CSS
Table_col {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
width: 660px;
background: white;
text-align: left;
border-collapse: collapse;
color: #3E4347;
}
.table_col th:first-child, .table_col td:first-child {
color: #F5F6F6;
border-left: none;
}
.table_col th {
font-weight: normal;
border-bottom: 2px solid #F5E1A6;
padding: 8px 10px;
}
.table_col td {
border-right: 20px solid white;
border-left: 20px solid white;
padding: 12px 10px;
color: #8b8e91;
}
Разметка HTML
Company | Q1 | Q2 | Q3 | Q4 |
---|---|---|---|---|
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Стили CSS
Table_blur {
background: #f5ffff;
border-collapse: collapse;
text-align: left;
}
.table_blur th {
border-top: 1px solid #777777;
box-shadow: inset 0 1px 0 #999999, inset 0 -1px 0 #999999;
background: linear-gradient(#9595b6, #5a567f);
color: white;
padding: 10px 15px;
position: relative;
}
.table_blur th:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 25%;
height: 25%;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255,255,255,.08));
}
.table_blur tr:nth-child(odd) {
background: #ebf3f9;
}
.table_blur th:first-child {
border-left: 1px solid #777777;
border-bottom: 1px solid #777777;
box-shadow: inset 1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur th:last-child {
border-right: 1px solid #777777;
border-bottom: 1px solid #777777;
box-shadow: inset -1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur td {
border: 1px solid #e3eef7;
padding: 10px 15px;
position: relative;
transition: all 0.5s ease;
}
.table_blur tbody:hover td {
color: transparent;
text-shadow: 0 0 3px #a09f9d;
}
.table_blur tbody:hover tr:hover td {
color: #444444;
text-shadow: none;
}
Многие веб мастера уверены, что использовать HTML таблицы в шаблонах - плохая практика. Но в данном уроке мы рассмотрим только таблицы CSS. Какая разница между таблицами HTML и CSS? Надо ли использовать таблицы CSS? Если да, то как?
Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению.
Основными элементами структуры являются строки. Строка определяется явно, а столбцы зависят от того, как заданы строки и ячейки.
Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS.
Каждый элемент таблицы HTML имеет эквивалент в CSS. Единственное отличие заключается в отсутствии отличий между td и th в варианте CSS.
Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS.
Table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption }
Подписи могут быть размещены сверху или снизу таблицы с помощью свойства caption-side:
#caption {caption-side: top} #caption {caption-side: bottom}
Несложно догадаться, как создать таблицу CSS опираясь на приведенный список. Вот пример таблицы.
#table {display: table;} .row {display: table-row;} .cell {display: table-cell;}
Если посмотреть на код HTML примера, то можно легко различить структуру таблицы (используются элементы div и span с классами и ID вместо table , td и tr).
Совсем небольшой код CSS представляет элементы div и span в виде таблицы.
В дополнение к выше приведенным свойствам модель таблицы CSS включает значение inline-table , которая определяет новую таблицу как и display: table , но в рамках контекста встроенного в HTML код формата.
Так как ячейки таблицы являются потомками строк таблицы, то для формирования столбцов имеет смысл использовать некоторые свойства. Модель таблицы CSS позволяет применять следующие свойства для столбцов и их группировки:
Различные элементы таблицы имеют разный уровень в стеке для обеспечения возможности использования разных фонов на разных слоях.
Данные слои можно посмотреть на представленном рисунке.
Фон слоя будет виден только если выше лежащий слой имеет прозрачный фон.
Это отличный способ для вывода пустых ячеек действительно пустыми с помощью использования прозрачного фона для них, через который будет видно строку, столбец или таблицу.
Ширина таблицы CSS может быть вычислена с помощью одно из двух алгоритмов . Алгоритм выбирается с помощью свойства table-layout и двух значений:
Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML.
Если вы явно определяете ширину таблицы, то следует использовать фиксированную модель расчета ширины.
По умолчанию высота ячейки устанавливается минимально необходимой для вывода содержания. Но вы можете явно определить высоту ячейки. Все ячейки в строке будут иметь высоту ячейки с максимальным значением.
Свойство vertical-align определяет выравнивание содержания в строке
Последняя группа значений применяется не для ячеек, а для текста в них. Ячейки в данном случае будут выравниваться в соответствии со значением baseline .
Есть три интересных свойства для рамок таблиц:
Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа.
Если рассмотреть использование таблиц HTML в сравнении с комбинацией элементов div и кода CSS, то выявляются следующие недостатки таблиц:
В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах.
CSS таблицы являются более семантическим решением, так как имеется четкое разделение структуры данных и представления внешнего вида.
Таблицы CSS достаточно просто освоить и использовать. Но они не имеют явных преимуществ перед таблицами HTML, за исключением более семантического кода.
Может быть практика использования покажет преимущества или недостатки таблиц CSS. Есть ли у вас опыт использования таблиц CSS в реальных проектах?
Цель урока: Знакомство со свойствами таблицы и с принципами табличной верстки CSS
Рассмотрим основные CSS свойства таблицы
Свойство рассматривается в одном и включает одновременно несколько свойств:
Существует также сборное правило:
table.collapse{ border-collapse:collapse; } table.separate{ border-collapse:separate; }
Результат:
Значения:
Пример:
Значения:
Значения:
Пример:
Благодаря большому числу свойств таблиц и вариациям их оформления, таблицы долгое время были некоторым станартом верстки веб-страниц. Если сделать границы таблицы невидимыми, то можно использовать ее отдельные ячейки в качестве отдельных блоков сраницы: шапка, меню, подвал и т.п.
Но это не совсем правильно, ведь каждому тегу есть свое назначение, и таблицы не должны были служить для верстки страниц. Однако отсутствие альтернативы сподвигало дизайнеров именно на такой метод верстки.
Сейчас есть другой способ — использование слоев, которые постепенно заменили таблицы в этом виде работы с веб-страницей. Однако и в наше время некоторые дизайнеры успешно используют табличную верстку.
Один из самых распространённых способов верстки — две колонки, т.е. страница делится на две части.
Пример: задать основной каркас страницы из двух колонок: первая — с фиксированным размером, вторая — на оставшуюся область браузера. Выполнить задание используя CSS стили ()
</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table > ... |
1 | 2 |
Результат:
Пример: задать разный фон ячеек (чтобы разделить две колонки друг от друга) и установить расстояние между колонками (разделитель)
/* для левой ячейки */ td#left{ width:200px; background: #ccc; border:1px solid black; /* временно обозначим границы */ } /* для правой ячейки */ td#right{ background: #fc3; border:1px solid black; /* временно обозначим границы */ } /* для разделителя */ #razdel{ width: 10px; /* Расстояние между колонками */ }
Все вместе:
</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "razdel" > td > <td id = "right" > 2</ td > </ tr > </ table > |
1 | 2 |
Для разделителя была добавлена новая ячейка.
Результат:
Пример: сделать разделитель между колонками таблицы, используя пунктирную линию границы смежных ячеек
/* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ /* новое */ border-right: 1px dashed #000; /* Параметры правой пунктирной границы */ }
Все вместе:
</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table > |
1 | 2 |
Результат:
Существует понятие фиксированного или «резинового» макета верстки.
Фиксированный макет CSS
Пример: создать шаблон страницы из трех колонок. Использовать фиксированный макет табличной верстки:
</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table > |
1 | 2 | 3 |
Результат:
Резиновый макет
Важно: Сумма ширины всех колонок должна получиться 100%, независимо от ширины таблицы.
Пример:
Задать фон для колонок и визуально разделить колонки границей.
Выполнение:
</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table > |
1 | 2 | 3 |
Результат:
Рассмотрим второй вариант, когда ширина центральной колонки автоматически подбирается браузером; примером может служить рисунок:
Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет табличной верстки:
Задать фон для колонок и визуально разделить колонки границей.
</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table > |
1 | 2 | 3 |
Результат:
Результат будет примерно такой же, только «растягивание» будет происходит за счет центральной колонки.
Если ширина двух колонок устанавливается в процентах, а третьей - в пикселях, обойтись одной таблицей не получится
. Так, если ширина всей таблицы равна 100 процентов, первой колонки - 200 пикселей, а оставшихся колонок по 20 процентов, то простое вычисление показывает, что размер первой колонки получается равным 60 процентов. В таком случае заданное значение в пикселях браузером не воспримется, а размер будет установлен в процентах.
Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет с вложенной таблицей:
Задать фон для колонок.
Выполнение:
Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами. А в этой статье я расскажу об их оформлении с помощью CSS. Для форматирования таблиц каскадные стили используют перечисленные ниже свойства. width и heightЗадают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера Table {width: 450px; height: 80%;} Указывает, где будет размещён заголовок таблицы, описанный тегом Эксклюзивно для обозревателя Firefox доступны значения left
(заголовок слева) и right
(справа от таблицы), но другие браузеры их не понимают. Table {caption-side: top;} Помогает избежать ситуаций, когда границы ячеек образуют двойные рамки. На рисунке ниже показан как раз такой случай. Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate;
даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse;
(результат показан на рисунке ниже). Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе - по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}
. Table {
border: 4px double #FCA360;
border-collapse: separate;
border-spacing: 10px 20px;
}
td {
padding: 3px;
border: 1px solid #FCA360;
} Задаёт таблице следующее оформление: Указывает, будет ли отображаться фон и границы ячейки, если она пуста. Значение у свойства может быть одно из двух: Указывает браузеру, как определять ширину ячеек таблицы, основываясь на их содержимом. Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height
) и шириной (width
). Помня это, оформим несложную таблицу, частично прокомментировав код.
В браузере таблица будет выглядеть, как показано ниже. width: 50%;
Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера
, потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера. caption-side: bottom;
Размещаем заголовок снизу, под таблицей. border: 4px solid #006400;
Задаём таблице цветную рамку толщиной 4 пикселя. border-collapse: collapse;
Объединяем границы ячеек. table-layout: fixed;
Настраиваем способ определения браузером ширины таблицы. font-size: 13px;
Задаём размер шрифта заглавных ячеек. font-weight: bold;
Делаем текст внутри них жирным. background: #ADFF2F;
Устанавливаем цвет фона ячеек. border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;
Настраиваем верхние и нижние рамки. color: #039;
Определяем цвет текста. padding: 8px;
Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям. |