Внутренний отступ таблицы CSS
Чтобы добавить пространство между границами ячеек и содержимым, используйте свойство padding на элементах <td> и <th>.
Пример
Каждая ячейка получает внутренний отступ 10px и текст, выровненный по левому краю.
Prompt
HTML-страница, добавляющая внутренний отступ и выравнивание по левому краю ячейкам таблицы.
Во внутреннем блоке
<style> объедините границы таблицы, сделайте её на всю ширину и задайте th и td внутренний отступ 10px с текстом, выровненным по левому краю. Добавьте таблицу с колонками Имя, Фамилия, Сбережения и несколькими строками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr><th>First Name</th><th>Last Name</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
Чтобы добавить горизонтальные разделительные линии между строками, добавьте border-bottom к элементам <th> и <td>.
Пример
Нижняя граница на каждой ячейке создаёт разделители строк.
Prompt
HTML-страница, добавляющая горизонтальные разделительные линии между строками таблицы.
Во внутреннем блоке
<style> объедините границы таблицы, сделайте её на всю ширину, задайте th и td внутренний отступ, и добавьте нижнюю границу (1px solid #ddd) к th и td, чтобы у каждой строки была разделительная линия. Добавьте таблицу с колонками Имя, Фамилия, Сбережения и несколькими строками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table>
<tr><th>First Name</th><th>Last Name</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 с эффектом наведения
Используйте селектор :hover на <tr>, чтобы выделить строку при наведении курсора мыши.
Пример
Каждая строка становится коралловой при наведении на неё курсора.
Prompt
HTML-страница, выделяющая строку таблицы при наведении курсора мыши.
Во внутреннем блоке
<style> объедините границы таблицы, сделайте её на всю ширину, задайте th и td внутренний отступ и нижние разделители, и добавьте правило tr:hover, задающее коралловый фон. Добавьте таблицу с колонками Имя, Фамилия, Сбережения и несколькими строками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: coral;
}
</style>
</head>
<body>
<table>
<tr><th>First Name</th><th>Last Name</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 в зебровую полоску
Для зебровых полос используйте селектор nth-child() и задайте каждой чётной (или нечётной) строке цвет фона.
Пример
Каждая чётная строка получает светло-серый фон.
Prompt
HTML-страница с таблицей в зебровую полоску.
Во внутреннем блоке
<style> объедините границы таблицы, сделайте её на всю ширину, задайте th и td внутренний отступ и выравнивание по левому краю, и затените каждую чётную строку светло-серым фоном с помощью tr:nth-child(even). Добавьте таблицу с колонками Имя, Фамилия, Сбережения и несколькими строками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr><th>First Name</th><th>Last Name</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
Вы можете задать цвет фона и цвет текста для таблицы, например на элементах <th>.
Пример
Ячейки заголовка получают зелёный фон и белый текст.
Prompt
HTML-страница с цветным заголовком таблицы.
Во внутреннем блоке
<style> объедините границы таблицы, сделайте её на всю ширину, задайте th и td внутренний отступ и выравнивание по левому краю, а элементам th задайте зелёный фон (#04AA6D) с белым текстом. Добавьте таблицу с колонками Имя, Фамилия, Сбережения и несколькими строками.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<table>
<tr><th>First Name</th><th>Last Name</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>