<html>
<body>
<style>
.styled-table {
border-collapse: collapse;
margin: 5px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.styled-table th,
.styled-table td {
padding: 12px 12px;
}
.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
table-layout: fixed;
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
</style>
...
echo "<table class='styled-table'>
<thead>
<tr>
<td>Название</td>
<td>Модель</td>
<td>Инвентарный номер</td>
<td>Поступил</td>
<td>Предыдущий владелец</td>
</tr>
</thead>
</table>";
....
echo "<table class='styled-table'>
<tbody>
<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$last_date</td>
<td>$owner_prev</td>
</tr>
</tbody>
</table>";
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
table-layout: fixed;
}
Там разная заливка у заголовка и непосредственно таблицы с данными - поэтому пришлось разделить.
Там разная заливка у заголовка и непосредственно таблицы с данными - поэтому пришлось разделить.Ась? Что? У вас хтмл/цсс стек из 1994?
<?php echo file_get_contents("html/header_notebooks.html"); ?>
<html>
<body>
...
</body>
</html>
<?php echo file_get_contents("html/footer_notebooks.html"); ?>
<style>
.image-container {
background-image: url(
"html/laptop.jpg");
width: 50%;
height: 300px;
background-repeat: no-repeat;
margin-top: 5px;
}
</style>
</div>
<footer>
<div class="image-container"></div>
Сначала идет DOCTYPE.
Потом открывающий <html>
Потом открывающий <head>
вот тут уже могут быть вставки <style>...</style> , подключение стилей, подключение скриптов.
Закрывающий </head>
Открывающий <body>
содержимое
Закрывающий </body>
Закрывающий </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" contents="Web version">
<link rel="stylesheet" href="html/style_notebooks.css" type="text/css">
<title>Ноутбуки на складе</title>
<link rel="icon" href="html/laptop-icon-19529.png" type="image/x-icon" />
<style>
.image-container {
background-image: url(
"html/laptop.jpg");
width: 80%;
height: 300px;
background-repeat: no-repeat;
margin-top: 5px;
}
</style>
</head>
<body>
<header>
<nav id="navigation">
<ul>
<li><a href="index.php">Главная</a></li>
<li><a href="notebooks.php">Ноутбуки</a></li>
<li><a href="monitors.php">Мониторы</a></li>
<li><a href="monoblocks.php">Моноблоки</a></li>
</ul>
</nav>
</header>
<div id="contents">
<?php echo file_get_contents("html/header_notebooks.html"); ?>
<html>
<body>
<style>
.styled-table {
border-collapse: collapse;
margin: 5px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
width:60%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
table-layout: fixed;
float:right;
clear: both;
}
.styled-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.styled-table th,
.styled-table td {
padding: 12px 12px;
overflow-wrap: break-word;
}
...
echo "<table class='styled-table'>
<thead>
<tr>
<td>Название</td>
<td>Модель</td>
<td>Инвентарный номер</td>
<td>Поступил</td>
<td>Предыдущий владелец</td>
</tr>
</thead>
</table>";
...
echo "<table class='styled-table'>
<tbody>
<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$last_date</td>
<td>$owner_prev</td>
</tr>
</tbody>
</table>";
В одном классе я разместил float: right; и clear: both.
<?php echo file_get_contents("html/header_notebooks.html"); ?>
<html>
<body>
<style>
.styled-table {
border-collapse: collapse;
margin: 5px 0;
font-size: 0.9em;
font-family: sans-serif;
background-size: 100% 100%;
width:58%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
table-layout: fixed;
float:right;
clear: both;
}
<style>
.image-container {
background-image: url(
"html/laptop.jpg");
width: 40%;
height: 400px;
background-repeat: no-repeat;
margin-top: 5px;
}
</style>
<?php echo file_get_contents("html/header_notebooks.html"); ?>
<html>
<body>
<style>
.styled-table {
border-collapse: collapse;
margin: 5px 0;
font-size: 0.9em;
font-family: sans-serif;
background-size: 100% 100%;
width: calc(99% - 474px);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
table-layout: fixed;
float:right;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" contents="Web versione">
<link rel="stylesheet" href="html/style_notebooks.css" type="text/css">
<title>Ноутбуки на складе</title>
<link rel="icon" href="html/laptop-icon-19529.png" type="image/x-icon" />
<style>
.image-container {
background-image: url(
"html/laptop.jpg");
width: 474px;
height: 100vh;
background-repeat: no-repeat;
margin-top: 5px;
}
</style>
это все есть, иначе бы ничего не работало вообще