Размеры HTML таблиц - как задать ширину и высоту ячейки
Меню
Справочник

Размеры таблиц HTML

html table sizes

HTML-таблицы могут иметь разные размеры как для каждого столбца, так и для строки или всей таблицы.


     
     
     
<table style="width: 100%;">
 <tbody>
   <tr>
    <td></td>
    <td style="width: 80%;"> </td>
    <td></td>
   </tr>
 </tbody>
</table>

     
     
     
<table style="width: 100%;">
 <tbody>
  <tr>
    <td style="width: 40%;"> </td>
    <td></td>
    <td style="width: 40%;"> </td>
  </tr>
 </tbody>
</table>

     
     
<table style="width: 100%;">
 <tbody>
  <tr>
    <td style="width: 70%;"> </td>
    <td></td>
    <td></td>
  </tr>
  <tr style="height: 50px;">
    <td></td>
    <td></td>
    <td></td>
  </tr>
 </tbody>
</table>

Используйте атрибут style со свойствами width или height, чтобы указать размер таблицы, строки или столбца.


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

Чтобы установить ширину таблицы, добавьте атрибут style к элементу <table>.

Установите ширину таблицы на 100%:

<table style="width:100%">
 <tr>
   <th>Имя</th>
   <th>Фамилия</th>
   <th>Возраст</th>
 </tr>
 <tr>
   <td>>Фаст</td>
   <td>Игл</td>
   <td>47</td>
 </tr>
 <tr>
   <td>Элис</td>
   <td>Берд</td>
   <td>22</td>
 </tr>
</table>

Имя Фамилия Возраст
Фаст Игл 47
Элис Берд 22
Примечание: использование процента в качестве единицы измерения ширины означает, насколько широким будет этот элемент по сравнению с его родительским элементом, которым в данном случае является элемент <body>.

Ширина столбца таблицы HTML

Чтобы установить размер определенного столбца, добавьте атрибут style к элементу <th> или <td>:

<table style="width:100%">
 <tr>
   <th style="width:80%">Имя</th>
   <th>Фамилия</th>
   <th>Возраст</th>
 </tr>
 <tr>
   <td>Фаст</td>
   <td>Игл</td>
   <td>47</td>
 </tr>
 <tr>
   <td>Элис</td>
   <td>Берд</td>
   <td>22</td>
 </tr>
</table>

Имя Фамилия Возраст
Фаст Игл 47
Элис Берд 22

Высота строки таблицы HTML

Чтобы установить высоту определенной строки, добавьте атрибут style к элементу строки таблицы:

<table style="width:100%">
 <tr>
   <th style="height:80px">Имя</th>
   <th>Фамилия</th>
   <th>Возраст</th>
 </tr>
 <tr>
   <td>Фаст</td>
   <td>Игл</td>
   <td>47</td>
 </tr>
 <tr>
   <td>Элис</td>
   <td>Берд</td>
   <td>22</td>
 </tr>
</table>

Имя Фамилия Возраст
Фаст Игл 47
Элис Берд 22

☛ Заголовки таблиц HTML

Границы таблиц HTML ☚

Поделиться ссылкой