Как задать ширину таблицы?

Чтобы установить ширину таблицы в пикселях или в процентах используйте стилевое свойство width, применяя его к селектору table, как показано в примере 1.

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ширина таблицы</title> <style> table { border: 1px solid #333; /* Рамка вокруг таблицы */ margin-bottom: 1em; /* Отступ снизу */ } table.tbl1 { width: 100%; /* Ширина таблицы в процентах */ } table.tbl2 { width: 300px; /* Ширина таблицы в пикселях */ } </style> </head> <body> <table class="tbl1"> <tr> <td class="col1">Колонка 1</td> <td class="col2">Колонка 2</td> </tr> </table> <table class="tbl2"> <tr> <td class="col1">Колонка 1</td> <td class="col2">Колонка 2</td> </tr> </table> </body> </html>

Результат данного примера показан на рис. 1. Для первой таблицы ширина задана как 100% и таблица занимает всю ширину окна браузера. Для второй таблицы ширина фиксирована и задана как 300 пикселей.

Ширина таблиц

Рис. 1. Ширина таблиц

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

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 20.09.2018
Редакторы: Влад Мержевич