«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS


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

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

Значение свойства table-layout

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

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

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

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

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

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

- auto

Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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>
Результат

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




Все cвойства CSS

Тематические публикации

CSS по шагам

Тематические публикации