Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Table-layout Text-align

Свойство table-layout

Описание

Свойство table-layout устанавливает способ определения браузером ширины ячеек таблицы.

Это свойство применимо к тегу <table>.

Значение

- auto - ширина ячеек таблицы определяется браузером автоматически на основании содержимого ячеек,

- fixed – ширина ячеек таблицы фиксирована. При этом:

- если ширина не указана, то она будет одинакова для всех ячеек, независимо от размеров их содержимого,

- если указана ширина отдельных ячеек, то ширина оставшихся также будет одинакова независимо от размеров их содержимого,

- inherit - принимает значение свойства родительского элемента.

Значение по умолчанию

- auto


Пример

Пример - Свойство table-layout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство table-layout </title>

<style type="text/css">
table{width:700px; margin:5px;}
td{
padding:3px;}
</style>

</head>
<body>

<table border>
<caption> Автоматическое вычисление ширины ячеек. </caption>
<tr>
<td>
Первая ячейка........................... </td>
<td>
2-я ячейка. </td>
<td>
3-я. </td>
</tr>
</table>

<table border>
<caption> Ширина первой ячейки 250 px. Ширина остальных вычисляется автоматически. </caption>
<tr>
<td width=
"250"> Первая ячейка........................... </td>
<td>
2-я ячейка. </td>
<td>
3-я. </td>
</tr>
</table>

<table border style=
"table-layout:fixed;">
<caption> Ширина ячеек фиксирована - одинакова. </caption>
<tr>
<td> Первая ячейка........................... </td>
<td> 2-я ячейка. </td>
<td> 3-я. </td>
</tr>
</table>

<table border style=
"table-layout:fixed;">
<caption>
Ширина первой ячейки 250 пикселей. Ширина остальных фиксирована - одинакова. </caption>
<tr>
<td width="250"> Первая ячейка........................... </td>
<td> 2-я ячейка. </td>
<td> 3-я. </td>
</tr>
</table>


</body>
</html>

При просмотре в браузере

Автоматическое вычисление ширины ячеек.
Первая ячейка........................... 2-я ячейка. 3-я.
Ширина первой ячейки 250 px. Ширина остальных вычисляется автоматически.
Первая ячейка........................... 2-я ячейка. 3-я.
Ширина ячеек фиксирована - одинакова.
Первая ячейка........................... 2-я ячейка. 3-я.
Ширина первой ячейки 250 пикселей. Ширина остальных фиксирована - одинакова.
Первая ячейка........................... 2-я ячейка. 3-я.

При значении auto загрузка таблиц может быть медленной, так как браузеру необходимо вычислить и получить размеры всех ячеек исходя из их содержимого. А свойство table-layout со значением fixed повышает скорость загрузки страницы.


Свойство Right Свойство Table-layout Свойство Text-align
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru