CSS (Cascading Style Sheets) позволяет стилизовать HTML таблицы, изменяя их цвет, фон, шрифт, ширину, высоту, всех и отдельных ячеек. CSS таблицы состоят из тега <table>
и набора тегов <tr>
для строк таблицы и <td>
для ячеек внутри каждой строки.
Пример HTML кода для создания простой таблицы:
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Иван</td>
<td>Иванов</td>
<td>28</td>
</tr>
<tr>
<td>Петр</td>
<td>Петров</td>
<td>35</td>
</tr>
</table>
Пример CSS кода для добавления стилей таблице:
table {
border-collapse: collapse; /* объединение границ ячеек */
width: 100%;
}
th, td {
padding: 8px; /* отступ внутри ячеек */
text-align: left; /* выравнивание текста в ячейках */
border-bottom: 1px solid #ddd; /* отрисовка границ ячеек */
}
th {
background-color: #f2f2f2; /* цвет фона заголовков */
color: #000; /* цвет текста заголовков */
}
Этот код добавит стиль к таблице, которая будет выглядеть как:
Имя | Фамилия | Возраст |
---|---|---|
Иван | Иванов | 28 |
Петр | Петров | 35 |
Это лишь пример, CSS предоставляет множество других опций для изменения стилей таблиц, которые могут быть применены в зависимости от потребностей дизайна веб-страницы или интерфейса.