Ширина таблицы CSS
Свойство width задаёт ширину таблицы. Оно может быть процентом (%), фиксированной длиной (px) или ключевым словом auto.
Ширина таблицы CSS в процентах
Чтобы таблица занимала всю ширину, используйте width: 100%. Чтобы она занимала половину страницы, используйте width: 50%.
Полная ширина
Таблица занимает всю ширину страницы.
Prompt
HTML-страница с таблицей полной ширины.
Во внутреннем блоке
<style> задайте table/th/td сплошную объединённую границу 1px и установите ширину таблицы в 100%. Добавьте таблицу с колонками Имя/Фамилия/Сбережения и несколькими строками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: 100%;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
Половинная ширина
Таблица занимает половину ширины страницы.
Prompt
HTML-страница с таблицей половинной ширины.
Во внутреннем блоке
<style> задайте table/th/td сплошную объединённую границу 1px и установите ширину таблицы в 50%. Добавьте таблицу с колонками Имя/Фамилия/Сбережения и несколькими строками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: 50%;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
Ширина таблицы CSS фиксированной ширины
Чтобы задать таблице фиксированную ширину, используйте длину, например width: 500px.
Пример
Таблица имеет фиксированную ширину 500px.
Prompt
HTML-страница с таблицей фиксированной ширины.
Во внутреннем блоке
<style> задайте table/th/td сплошную объединённую границу 1px и установите ширину таблицы в 500px. Добавьте таблицу с колонками Имя/Фамилия/Сбережения и несколькими строками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: 500px;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
Ширина таблицы CSS с использованием auto
Используйте width: auto, чтобы браузер сам подстроил размер таблицы под её содержимое.
Пример
Ширина таблицы установлена в auto.
Prompt
HTML-страница с таблицей, ширина которой установлена в auto.
Во внутреннем блоке
<style> задайте table/th/td сплошную объединённую границу 1px и установите ширину таблицы в auto, чтобы браузер подстроил её под содержимое. Добавьте таблицу с колонками Имя/Фамилия/Сбережения и несколькими строками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
table {
width: auto;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
Высота таблицы CSS
Свойство height задаёт высоту таблицы. Оно может быть процентом (%), фиксированной длиной (px) или ключевым словом auto.
Пример
Заголовкам таблицы задана фиксированная высота 70px.
Prompt
HTML-страница, задающая фиксированную высоту для заголовков таблицы.
Во внутреннем блоке
<style> задайте table/th/td сплошную объединённую границу 1px и установите высоту <th> в 70px. Добавьте таблицу с колонками Имя/Фамилия/Сбережения и несколькими строками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
th {
height: 70px;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>