а)
border-collapse
Применяется в таблице, определяет способ прорисовки внутренних соприкасающихся границ. Возможные значения:
- separate - границы прорисовываются раздельно, т.е. пользователь видит две линии (раздельные или соприкасающиеся) (значение по умолчанию)
- collapse - одна из соприкасающихся границ уничтожается, т.е. таблица расчерчивается на ячейки одинарными линиями
Данное свойство может несколько криво обрабытываться IE-ом, для устранения этого можно во внешней или внутренней таблице стилей явно и чётко прописать способ обображения границ table, td и th. По-моему, очень неудобно, или я снова что-то недопоняла.
Примеры:
<table border=1 cellspacing=0 style="border-collapse:separate">
<tr><td>1х1<td>1х2
<tr><td>2х1<td>2х2
</table>
|
|
|
<table border=1 cellspacing=0 style="border-collapse:collapse">
<tr><td>1х1<td>1х2
<tr><td>2х1<td>2х2
</table>
|
|
|
(separate - англ. отделять, разделять
collapse - англ. обвал, крушение)
б)
border-spacing
Расстояние между внешней границей таблицы и границами наполняющих её ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное. Не функционировало в IE7, но заработало в 8-ой версии.
Примеры:
<table border=1 style="border-spacing:20px">
<tr><td>1х1<td>1х2
<tr><td>2х1<td>2х2
</table>
|
|
|
<table border=1 style="border-spacing:30px 10px">
<tr><td>1х1<td>1х2
<tr><td>2х1<td>2х2
</table>
|
|
|
в)
caption-side
Положение заголовка таблицы относительно её самой. Значения left и right работают лишь в MF. Не функционировало в IE7, но заработало в IE8. Значение по умолчанию - top.
| top
|
Мой_заголовок
| 1х1 | 1х2
| | 2х1 | 2х2
|
|
| bottom
|
Мой_заголовок
| 1х1 | 1х2
| | 2х1 | 2х2
|
|
| left
|
Мой_заголовок
| 1х1 | 1х2
| | 2х1 | 2х2
|
|
| right
|
Мой_заголовок
| 1х1 | 1х2
| | 2х1 | 2х2
|
|
Код одного из приведённых примеров:
<table width=200 border=1 style="caption-side:bottom">
<caption>Мой_заголовок</caption>
<tr><td>1х1<td>1х2
<tr><td>2х1<td>2х2
</table>
Примечание:
Заголовок можно дополнительно сместить влево или вправо с помощью свойства text-align .
г)
empty-cells
Свойство указывает браузеру, следует ли отображать границы ячейки и её фон, если в ней ничего нет
(даже символа неразрывного пробела). Если все ячейки в строке пустые, то строка прячется целиком. Не функционировало в IE7, но заработало в 8-ой версии. Возможные значения:
- hide - границы ячейки отображаться не будут (по умолчанию)
- show - границы ячейки будут отображены (как если бы внутри неё находился символ )
Примеры:
<table border=1 style="empty-cells:hide">
<tr><td>1х1<td>1х2
<tr><td>2х1<td>
</table>
|
|
<table border=1 style="empty-cells:show">
<tr><td>1х1<td>1х2
<tr><td>2х1<td>
</table>
|
|
(empty - англ. пустой, опустошать
hide - англ. прятать, скрывать
show - англ. показывать, отображать)
д)
table-layout
Способ, которым браузер создаёт таблицу. Вернее, как именно он определяет ширину её столбцов.
- auto - обеспечение оптимальной структуры таблицы. Браузер сначала загружает всё содержимое таблицы, а затем вычисляет наиболее подходящую ширину столбцов. Т.е. таблица получается оптимально сконфигурированной, но при объёмном содержимом и медленном Интернет-соединении строится долго и сложно. (значение по умолчанию)
- fixed - упрощённо-ускоренное построение таблицы. Браузер сначала по явно указанным данным строит структуру таблицы, а затем постепенно заполняет её содержимым. Если более детально, то по заголовку таблицы и структуре первой строки браузер определяет, сколько в таблице должно быть столбцов и какой ширины. Если ширина отдельных столбцов явно не указана, браузер считает их равными друг дружке. Создаётся скелет таблицы с далее уже не изменяемой шириной столбцов, который постепенно и плавно заполняется содержимым по мере его загрузки. Предупреждение: хотя в отдельных браузерах это и не обязательно, но в целом в таблице для корректной работы данного значения обязательно должна cсодержаться информация об её общей ширине, а информация о ширине отдельных столбцов находиться только в первой строке таблицы или в дескрипторах <col>/<colgroup>.
Примеры:
<table border=1
style="width:250px; table-layout:auto">
<tr><td>текст 1
<td>текст 2
<tr><td">1 1 1 ...
<td">2
</table>
|
|
| текст 1
| текст 2
| | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
| 2
|
|
<table border=1
style="width:250px; table-layout:fixed">
<tr><td>текст 1
<td>текст 2
<tr><td">1 1 1 ...
<td">2
</table>
|
|
| текст 1
| текст 2
| | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
| 2
|
|
<table border=1
style="width:250px; table-layout:fixed">
<tr><td>текст 1
<td width=33%>текст 2 текст 2 ...
<tr><td">1 1 1 ...
<td">2
</table>
|
|
| текст 1
| текст 2 текст 2 текст 2
| | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
| 2
|
|
(layout - англ. схема размещения, компоновка)
