Как установить ширину таблицы через стили?

🕛 22.01.2009, 23:39

Как известно, ширина таблицы определяется с помощью параметра width тега

<TABLE>

. При этом допустимо устанавливать ширину в пикселах (width="400") или в процентах (width="60%"). Через стили ширину таблиц задавать удобнее, поскольку можно сразу же определить ширину нескольких таблиц и менять их в одном месте. К тому же несколько сокращается объем кода.
Для определения ширины таблицы используйте стилевой атрибут width, применяя его к селектору TABLE, как показано в примере 1.

Пример 1. Ширина таблицы

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Ширина таблицы</title> <style type="text/css"> TABLE { width: 100%; /* Ширина таблицы в процентах */ } TD.col1 { width: 25%; /* Ширина ячейки */ } </style> </head> <body> <table border="1"> <tr> <td class="col1">Колонка 1</td> <td class="col2">Колонка 2</td> </tr> </table> </body>
</html>

В данном примере ширина всей таблицы устанавливается как 100%, а ширина левой колонки 25%. Это достигается за счет добавления атрибута width к селектору TD с именем определенного класса (<td class="col1">).

При использовании стилей для изменения ширины таблицы допустимо применять любые допустимые единицы измерения, а не только пикселы и проценты.