<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: итоговая таблица</title>
</head>
<body>
<h1>Итоговая таблица</h1>
<table>
<tr class="title">
<td class="blue1"> Город</td>
<td class="light"> Посещений </td>
<td class="blue2"> % </td>
</tr>
<tr >
<td class="city">СПб</td>
<td class="visit"> 199 </td>
<td class="per"> 65.12 </td>
</tr>
<tr class= "yellow">
<td class="city"> Москва </td>
<td class="visit"> 69 </td>
<td class="per"> 21.3 </td>
</tr>
<tr>
<td class="city"> Киев </td>
<td class="visit"> 5 </td>
<td class="per"> 8 </td>
</tr>
<tr class="yellow">
<td class ="lala" colspan="2"> Посещений за весь период </td>
<td class="per"> 273 </td>
</tr>
</table>
</body>
</html>
По наложению - немного сдвинуты слова в верхней строке, а я никак не пойму - почему?
css-код тоже нужен.
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse;
padding: 10px;
width: 100%;
}
tr.title {
border-bottom: 1px solid black;
border-top: 1px solid black;
}
td.blue1 {
background-color: darkcyan;
color: white;
text-align: left;
width: 33%;
padding: 10px;
}
td.blue2 {
background-color: darkcyan;
color: white;
text-align: right;
width: 33%;
padding: 10px;
}
td.light {
background-color: lightblue;
color: white;
text-align: center;
width: 33%;
padding: 10px;
}
tr {
border-bottom: 1px solid lightgray;
padding: 10px;
}
td.city {
text-align: left;
padding: 10px;
}
td.visit {
text-align: center;
}
td.per {
text-align: right;
padding: 10px;
}
td.lala {
padding: 10px;
}
tr.yellow {
background-color: lightyellow;
border-bottom: 1px solid lightgray;
padding: 10px;
}
Текст в первой строке должен быть жирным.
Пересмотрите свой css-код, вы много раз повторяетесь.
Попробуйте сгруппировать общие свойства для td в одном правиле.
td {
...
}
1 лайк