Размеры Таблицы HTML
Таблицы HTML могут иметь разные размеры для каждого столбца, каждого ряда или всей таблицы. Используйте атрибут style со свойствами width или height, чтобы задать размер таблицы, ряда или столбца.
Ширина Таблицы HTML
Чтобы задать ширину таблицы, добавьте атрибут style к элементу <table>.
Примечание: Ширина, заданная в процентах, зависит от родительского элемента, которым здесь является <body>.
Пример
Таблица шириной 100%.
Prompt
Таблица шириной 100%, заданной с помощью атрибута style на элементе table, со строкой заголовков Firstname/Lastname/Age и двумя строками данных (Jill Smith 50, Eve Jackson 94).
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ширина Таблицы</title>
</head>
<body>
<table style="width:100%">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Ширина Столбца Таблицы HTML
Чтобы задать ширину одного столбца, добавьте атрибут style к <th> или <td> в этом столбце.
Пример
Первый столбец шириной 70%.
Prompt
Таблица шириной 100%, в которой первый столбец задан шириной 70% с помощью атрибута style на первом th, с теми же данными Firstname/Lastname/Age.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ширина Столбца</title>
</head>
<body>
<table style="width:100%">
<tr>
<th style="width:70%">Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Высота Ряда Таблицы HTML
Чтобы задать высоту одного ряда, добавьте атрибут style к этому элементу <tr>.
Пример
Второй ряд высотой 200 пикселей.
Prompt
Таблица шириной 100%, в которой вторая строка задана высотой 200 пикселей с помощью атрибута style на этом tr, с теми же данными Firstname/Lastname/Age.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Высота Строки</title>
</head>
<body>
<table style="width:100%">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>