- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Выравнивание содержимого в ячейках</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<caption>Распределение браузеров</caption>
<tr>
<th class="cell-1" rowspan="2">Браузер</th>
<th colspan="2">Посещения</th>
</tr>
<tr>
<th>Количество</th>
<th>В процентах</th>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td class="column-2">1263</td>
<td class="column-3">75%</td>
</tr>
<tr>
<td>Google Chrome</td>
<td class="column-2">78</td>
<td class="column-3">5%</td>
</tr>
<tr>
<td>Safari</td>
<td class="column-2">345</td>
<td class="column-3">20%</td>
</tr>
</table>
</body>
</html>
CSS
.cell-1 {
}
.column-2 {
}
.column-3 {
}
table {
border-collapse: collapse;
border: 2px solid black;
}
td {
padding: 5px;
padding-right: 10px;
border: 1px solid lightgray;
}
th {
padding: 10px;
border: 1px solid black;
}
caption {
margin-bottom: 10px;
font-size: 18px;
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
- Для CSS-правила
.cell-1добавьте свойствоvertical-align: top;. - Затем поменяйте его на
vertical-align: bottom;. - Для
.column-2свойствоtext-align: right;. - Для
.column-3свойствоtext-align: center;.