Курс CSS. Урок 27. CSS и таблицы.
На курсе HTML
курсе HTML, если конкретно, то на уроке, посвященному
таблицам, мы уже занимались построением таблиц, используя подход HTML-кодировщика.
Теперь настало время сделать такую же таблицу, но уже используя подход CSS-дизайнера, что представляется более правильным, естественным и перспективным.
Для начала напишем несколько правил для новых стилей:
А теперь разбирем подробно теоретические моменты для тех свойств, которые нам ранее не встречались.
Свойство border-collapse устанавливает, будут ли границы таблицы объединяться в простую границу или же будут раздельными, как в стандартом HTML.
В нашем случае мы используем значение:
border-collapse:collapse;
и таким способом объединяем границы таблицы.
Свойство vertical-align устанавливает, как будет производится выравнивание элемента по вертикали.
В нашем случае мы используем значение:
vertical-align:middle;
и таким способом размещаем данные в середине ячеек таблицы.
Наша таблица из учебного примера теперь имеет вот такой вид:
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_027_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_027_001.zip ← скачайте пример, чтобы установить на свой сайт...
Теперь настало время сделать такую же таблицу, но уже используя подход CSS-дизайнера, что представляется более правильным, естественным и перспективным.
Для начала напишем несколько правил для новых стилей:
.body_css_027_4 {
background-color: #F0F0F0;
/* background-image: url('images/pattern04.gif'); */
margin: 0;
padding: 0;
}
table.table_css_027, table.table_css_027 td, table.table_css_027 th {
border:1px solid #CCCCCC;
text-align:center;
}
table.table_css_027 {
width:700px;
border-collapse:collapse;
margin:25px auto;
}
table.table_css_027 td, table.table_css_027 th {
height:40px;
padding:5px;
vertical-align:middle;
background-color:#FFFFFF;
}
table.table_css_027 th {
background-color: #F0FEFF;
background-image: url('images/tablebg.jpg');
background-repeat:repeat-x;
}
table.table_css_027 tr.blue1 td {
background-color: #CEEFFF;
}
Свойство border-collapse устанавливает, будут ли границы таблицы объединяться в простую границу или же будут раздельными, как в стандартом HTML.
| Значение | Пояснение |
|---|---|
| collapse | Границы таблицы будут объединены в простую границу, когда это возможно (свойства border-spacing и empty-cells будут проигнорированы). |
| separate | Границы таблицы будут раздельными, как в стандартом HTML (свойства border-spacing и empty-cells НЕ будут проигнорированы. Это значение по умолчанию). |
| inherit | Определяет, что значение свойства border-collapse будет унаследовано от родительского элемента. |
border-collapse:collapse;
и таким способом объединяем границы таблицы.
Свойство vertical-align устанавливает, как будет производится выравнивание элемента по вертикали.
| Значение | Пояснение | Пример |
|---|---|---|
| length | Поднимает или опускает элемент на заданное расстояние. Допускаются отрицательные значения. | S._==vertical-align:10px;= ====vertical-align:-10px;= |
| % | Поднимает или опускает элемент на заданное расстояние в процентах, относительно значения line-height. Допускаются отрицательные значения. | S._==vertical-align:10%;= ====vertical-align:-10%;= |
| baseline | Выравнивает базовую линию элемента с базовой линией его родителя. Это значение по умолчанию. | S._==vertical-align:baseline;= |
| sub | Выравнивает элемент, переводя его вниз. | S._==vertical-align:sub;==== |
| super | Выравнивает элемент, переводя его вверх. | S._==vertical-align:super;==== |
| top | Верх элемента выравнивается с верхом самого высокого элемента строки. | S._==vertical-align:top;==== |
| text-top | Верх элемента выравнивается с верхом шрифта родительского элемента. | S._==vertical-align:text-top;==== |
| middle | Элемент располагается в середине родительского элемента. | S._==vertical-align:middle;==== |
| bottom | Низ элемента выравнивается с самым низким элементом строки. | S._==vertical-align:bottom;==== |
| text-bottom | Низ элемента выравнивается с низом шрифта родительского элемента. | S._==vertical-align:text-bottom;==== |
| inherit | Определяет, что значение свойства vertical-align будет наследовать значение родительского элемента. | S._==vertical-align:inherit;==== |
vertical-align:middle;
и таким способом размещаем данные в середине ячеек таблицы.
Наша таблица из учебного примера теперь имеет вот такой вид:
| Дата | Время | Продукт | Место | Жиры, Белки, Углеводы | Деньги | ||
|---|---|---|---|---|---|---|---|
| 12.12.2011 | 19:00 | Кефир | Москва | 0 | 4 | 2 | 30 |
| 13.12.2011 | 20:00 | Мясо | Уфа | 1 | 3 | 4 | 50 |
| 14.12.2011 | 22:00 | Морковь | Самара | 1 | 2 | 7 | 23 |
| 23:00 | Картофель | Псков | 0 | 2 | 8 | 45 | |
css_027_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_027_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
