<td width=””> или ширина ячейки таблицы html

Атрибут width HTML используется для установки ширины ячейки таблицы, которое переопределяет значение по умолчанию. Он устарел. Используйте CSS для управления разметкой ячеек в HTML таблицах.

Настройка ширины столбца таблицы в HTML

Атрибут width, в настоящее время устаревший, когда-то являлся стандартным методом регулирования ширины столбцов таблицы. По умолчанию, браузер будет настраивать столбцы таблицы так, чтобы соответствовать ее содержимому. Но если нужно контролировать ширину каждого столбца, вы можете это сделать, настроив ширину для каждого элемента <td> или <th> отдельной строки. Посмотрим, как это делали раньше с помощью атрибута width, а затем как то же самое можно сделать с помощью CSS. Но вначале нам нужен эталон для сравнения:

<table>   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, so much that we might even need a line break.</td>   </tr> </table>

Как видите, в первом случае мы не применили CSS или HTML td width. Что браузер сделает с такой таблицей?

Браузер выделил для второго столбца намного больше места, чем для первого. Теперь сделаем то же самое, но воспользуемся атрибутом width, чтобы принудительно задать столбцам одинаковый размер:

<table>   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td width="50%">Little</td>     <td width="50%">Lots and lots and lots and lots of content, so much that we might even need a line break.</td>   </tr> </table>

В обоих случаях браузер должен предоставить каждому столбцу одинаковую ширину. Но первая таблица должна автоматически устанавливать размер, чтобы заполнить доступное пространство, в то время как вторая имеет фиксированную ширину.

Довольно неплохо. К сожалению, это некорректный HTML- код, поскольку HTML table width был признан устаревшим. Но можно сделать то же самое с помощью простого кода CSS:

<style> .equal-width td {   width: 50%; } </style> <table class="equal-width">   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td>   </tr> </table>

Давайте посмотрим, как браузер выведет таблицу, использующую CSS вместо атрибута width:

Регулируемая высота строки таблицы

Еще один атрибут, тесно связанный с шириной, это высота (height). Этот атрибут также устарел, поэтому его не следует использовать. Но поскольку мы говорим о настройке ширины столбцов, то нужно рассмотреть и регулировку высоты строк. Вот как это делалось раньше с помощью устаревшего атрибута:

<table>   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td height="200px">Little</td>     <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td>   </tr> </table>

Как браузер выводит этот пример:

Поскольку HTML table column width устарел, мы покажем, как сделать то же самое с помощью CSS:

<style> .tall-row td {   height: 200px; } </style> <table class="tall-row">   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td>   </tr> </table>

Браузер должен отобразить этот код практически идентично предыдущему. Давайте посмотрим, так ли это:

Если честно, я не могу представить, зачем нужно контролировать высоту строки с помощью HTML td width. Гораздо больше смысла в том, чтобы настроить внешний и внутренний отступ для контента элемента <td> и позволить браузеру автоматически устанавливать высоту строки, основываясь на этой информации. Вот как можно применить эту стратегию:

<style> .tall-row td {   padding: 80px 10px; } </style> <table class="tall-row">   <tr>     <th>Thin</th>     <th>Really Really Really Wide</th>   </tr>   <tr>     <td>Little</td>     <td>Lots and lots and lots and lots of content, so much that it will require a line break.</td>   </tr> </table>

Этот код CSS добавляет отступы в 80 пикселей до и после, и 10 пикселей влево и вправо от каждого элемента <td>. Вот результат: