Внешний вид таблицы HTML можно значительно улучшить с помощью CSS:
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Germany |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| North/South | Simon Crowther | UK |
| Paris spécialités | Marie Bertrand | France |
| The Big Cheese | Liz Nixon | USA |
| Vaffeljernet | Palle Ibsen | Denmark |
Границы таблицы
Для указания границ таблицы в CSS, используйте свойство border.
В приведенном ниже примере указывается черная граница для элементов table, th, и td:
Пример 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table,th,td { border:1px solid black; }
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
</tr>
<tr>
<td>Денис</td>
<td>Воробьев</td>
</tr>
<tr>
<td>Михаил</td>
<td>Смотров</td>
</tr>
</table>
</body>
</html>
Обратите внимание, что таблица в примере выше имеет двойную границу. Это потому что элементы table, th, и td имеют разделенные границы.
Для отображения однинарной границы для таблицы, используйте свойство border-collapse.
Сворачивание границ
Свойство border-collapse устанавливает будут ли границы свернуты в одинарную границу или разделены:
Пример 2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table { border-collapse:collapse; }
table, td, th { border:1px solid black; }
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
</tr>
<tr>
<td>Денис</td>
<td>Воробьев</td>
</tr>
<tr>
<td>Михаил</td>
<td>Смотров</td>
</tr>
</table>
<p><b>Примечание:</b> Если !DOCTYPE не указан, свойство border-collapse может привести к неожиданным результатам.</p>
</body>
</html>
Ширина и высота таблицы
Ширина и высота таблицы определяется свойствами width и height.
В приведенном ниже примере задается ширина таблицы в 100%, и высота элементов th в 50px:
Пример 3
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td, th { border:1px solid black; }
table { width:100%; }
th { height:50px; }
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Сбережения</th>
</tr>
<tr>
<td>Сергей</td>
<td>Петров</td>
<td>$100</td>
</tr>
<tr>
<td>Лиза</td>
<td>Шнайдман</td>
<td>$150</td>
</tr>
<tr>
<td>Иван</td>
<td>Перепелица</td>
<td>$300</td>
</tr>
<tr>
<td>Роман</td>
<td>Задорнов</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Выравнивание текста таблицы
Текст в таблице выравнивается с помощью свойств text-align и vertical-align.
Свойство text-align указывает горизонтальное выравнивание, как влево, вправо или по центру:
Пример 4
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td, th { border:1px solid black; }
td { text-align:right; }
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Сбережения</th>
</tr>
<tr>
<td>Сергей</td>
<td>Петров</td>
<td>$100</td>
</tr>
<tr>
<td>Лиза</td>
<td>Шнайдман</td>
<td>$150</td>
</tr>
<tr>
<td>Иван</td>
<td>Перепелица</td>
<td>$300</td>
</tr>
<tr>
<td>Роман</td>
<td>Задорнов</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Свойство vertical-align определяет вертикальное выравнивание, как вверх, вниз или посередине:
Пример 5
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td, th { border:1px solid black; }
td { height:50px;vertical-align:bottom; }
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Сбережения</th>
</tr>
<tr>
<td>Сергей</td>
<td>Петров</td>
<td>$100</td>
</tr>
<tr>
<td>Лиза</td>
<td>Шнайдман</td>
<td>$150</td>
</tr>
<tr>
<td>Иван</td>
<td>Перепелица</td>
<td>$300</td>
</tr>
<tr>
<td>Роман</td>
<td>Задорнов</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Заполнение таблицы
Для контроля пространства между границей и содержанием в таблице, используйте свойство padding на элементы td и th:
Пример 6
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td, th { border:1px solid black; }
td { padding:15px; }
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Сбережения</th>
</tr>
<tr>
<td>Сергей</td>
<td>Петров</td>
<td>$100</td>
</tr>
<tr>
<td>Лиза</td>
<td>Шнайдман</td>
<td>$150</td>
</tr>
<tr>
<td>Иван</td>
<td>Перепелица</td>
<td>$300</td>
</tr>
<tr>
<td>Роман</td>
<td>Задорнов</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Цвет таблицы
В приведенном ниже примере указывается цвет границы, а также текста и цвет фона элементов th:
Пример 7
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td, th { border:1px solid green; }
th { background-color:green; color:white; }
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Сбережения</th>
</tr>
<tr>
<td>Сергей</td>
<td>Петров</td>
<td>$100</td>
</tr>
<tr>
<td>Лиза</td>
<td>Шнайдман</td>
<td>$150</td>
</tr>
<tr>
<td>Иван</td>
<td>Перепелица</td>
<td>$300</td>
</tr>
<tr>
<td>Роман</td>
<td>Задорнов</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Больше примеров
Пример 8
Этот пример демонстрирует, как создать причудливую таблицу.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
Пример 9
Этот пример демонстрирует, как позиционировать заголовок таблицы.<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table, td, th { border:1px solid black; }
caption { %LINK2158|caption-side%:bottom; }
</style>
</head>
<body>
<table>
<caption>Table 1.1 Customers</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживают свойство caption-side если !DOCTYPE указан.</p>
</body>
</html>
Была ли эта информация полезной?
