Размещение заголовка таблицы caption-side
определяет положение подписи таблицы по отношению к самой таблице Значение:
top
bottom
left
right
inherit - принимается значение родительского элемента
caption { caption-side: bottom;}
Аналогичный результат
table {caption-side: bottom;} Пример 7-1
empty-cells
Определяет, как выводить на экран границы пустых ячеек Значение:
show - границы пустых ячеек видны (по умолчанию) hide - границы пустых ячеек скрыты
inherit - принимается значение родительского элемента
speak-header
Определяет, как программа чтения экрана (screen reader) произносит табличные заголовки Значение:
once - заголовок каждого столбца произносится только один раз (по умолчанию). always -заголовок столбца произносится каждый раз при работе ячеек этого
столбца
table {speak-header: once}
column-span
Определяет количество соединяемых (span) столбцов row-span
Определяет количество соединяемых (span) строк colspan
rowspan
Пример 1
<head>
<style type="text/css"> body {
margin-left: 8em
}
table, th, td
{
border:1px solid black;
}
caption { caption-side: left; margin-left: -8em; width: 8em; text-align: right;
vertical-align: bottom
}
</style>
</head>
<body> <table >
<caption>заголовок<caption>
<tr>
<th colspan="2" >Имя Фамилия</th> <th>Группа</th>
</tr> <tr >
<td>Иван</td>
<td>Иванов</td>
<td rowspan="3">22103</td> </tr>
<tr>
<td>Алексей</td>
<td>Алексеев</td>
</tr> <tr >
<td>Петр</td>
<td>Петров</td>
</tr>
<tr>
<td>Леонид</td>
<td>Леонидов</td>
<td>22405</td>
</tr>
</table>
Пример 2
<head> <title>XHTML</title> <style type="text/css"> #list
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%;
border-collapse:collapse;
}
#list td, #list th
{
font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; font-style:bold; background-color:#A7C942;
}
#list th
{
font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#c0C942; color:#ffffff;
}
#list tr.alt td
{
color:#000000; font-style:italic; background-color:#EAF2D3;
}
</style>
</head>
<table id="list"> <tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Группа</th>
</tr>
<tr class="alt">
<td>Иван</td>
<td>Иванов</td>
<td>22103</td>
</tr>
<tr>
<td>Алексей</td>
<td>Алексеев</td>
<td>22104</td>
</tr>
<tr class="alt">
<td>Петр</td>
<td>Петров</td>
<td>22205</td>
</tr>
<tr>
<td>Леонид</td>
<td>Леонидов</td>
<td>22405</td>
</tr>
</table>
Цвет и фон
Эти свойства описывают цвет и фон для элемента (т.е. поверхность, на которой
располагается содержание). Они позволяют:
установить цвет фона и (или) его рисунок.
определить позицию изображения рисунка фона
определить способ повторения
background-color
определение цвета фона. Значение: <color> | transparent (по
умолчанию). Наследования нет h1 { background-color: #ff0000 }
background-image
Возможные значение: <url> или none. Наследования нет. body {background-image: url(marble.gif)}
p { background-image: none }
background-repeat
Определение повтора рисунка фона. Значение:
repeat
repeat-x
repeat-y
no-repeat
По умолчанию: repeat.
Наследования нет. background-attachment
Определение привязки фона. Значение: scroll (по молчанию) или fixed
Наследования нет.
body
{
}
background: red url(pendant.gif); background-repeat: repeat-y; background-attachment: fixed;
background-position
Определение начальное положение фона в блоке содержимого элемента. Значением этого свойства являются координаты привязки определенных точек изображения и блока содержимого.
Их можно задавать:
впроцентах,
вабсолютных единицах длины,
По умолчанию: 0% 0%.
Наследование: нет.
Процентное значение: по отношению к стороне самого элемента
Если задано только одно процентное выражение или абсолютные единицы, они устанавливают только горизонтальное положение, а вертикальное по умолчанию будет 50%.
Если заданы два значения, то первое из них - горизонтальное положение. Допускаются комбинации абсолютных единиц и процентных выражений, например, '50% 2cm'.
Допускаются отрицательные значения. Определение свойств фона в целом background
Значение: background-color background-image background-repeat background-attachment background-position
Свойство 'background' - это обобщающее свойство для установки отдельных свойств фона (т.е. цвета, рисунка, повтора, привязки и положения) в одном правиле таблицы стилей.
p { background: url(chess.png) gray 50% repeat fixed }
Свойство display
изменяет тип элемента
блочный (block)
встроенный (inline)
список
и т. д.
Возможные значения
inline - преобразует элемент в строчный
block - преобразует элемент в блочный
inline-block – элемент преобразуется в блочный, но переноса строк до элемента и после нет (т.е. соседние элементы воспринимают его как строчный)
table – создание блочного элемента аналогичного
table-caption - создание заголовка таблицы аналогичного
table-column-group группирование одного или нескольких столбцов таблицы
table-column определение столбца таблицы
table-header-group создание «шапки» таблицы
table-footer-group создание футера таблицы
table-row-group создание тела таблицы
table-row создание ряда (строки) таблицы
table-cell создание ячейки таблицы
Пример создания таблицы
<style type="text/css">
.table { display: table; border: 5px #60c solid; borderspacing: 2px;}
.tbody { display: table-row-group; }
.tr { display: table-row;}
.td { display: table-cell; border: 2px #ccc outset; } </style>
</head>
<body>
<div class="table"> <div class="tbody"> <div class="tr">
<div class="td">1.1</div> <div class="td">1.2</div>
</div>
<div class="tr">
<div class="td">2.1</div> <div class="td">2.2</div>
</div>
</div>
</div>
</body>