Главная » Руководство по HTML – HTML5 введение » Таблицы HTML » Размеры таблиц HTML

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

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 ☚

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