Вопрос Помогите пожалуйста написать таблицу на html

desirek · 22 Апр 2025

Привет всем, помогите мне пожалуйста написать такую же таблицу как на фотке.

Сам пытаюсь и вообще не получается

likegod2 · 22 Апр 2025

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Карточка участника</title>
<style>
table {
border-collapse: collapse;
width: 350px;
text-align: center;
font-family: Arial, sans-serif;
}
td, th {
border: 1px solid black;
padding: 5px;
}
.title {
background-color: #3399ff;
font-weight: bold;
font-size: 18px;
}
.code {
background-color: yellow;
font-weight: bold;
}
.label {
background-color: #ffd1b3;
font-weight: bold;
}
.photo-label {
background-color: #ccf2ff;
font-weight: bold;
}
.data-label {
background-color: #b3ffb3;
font-weight: bold;
}
.footer {
background-color: #ffccff;
font-weight: bold;
}
</style>
</head>
<body>

<table>
<tr>
<td colspan="4" class="title">Карточка участника</td>
</tr>
<tr>
<td class="code">Код</td>
<td colspan="3" class="code">1</td>
</tr>
<tr>
<td class="label">Фамилия</td>
<td colspan="3">Иванов Иван</td>
</tr>
<tr>
<td class="photo-label">Фото</td>
<td colspan="3">
<img src="https://i.ibb.co/DzX6W4G/king.png" alt="Фото" width="100">
</td>
</tr>
<tr>
<td class="data-label">Дата</td>
<td class="data-label">Вес</td>
<td class="data-label">Рост</td>
<td class="data-label">Пол</td>
</tr>
<tr>
<td>1988</td>
<td>62</td>
<td>175</td>
<td>М</td>
</tr>
<tr>
<td colspan="4" class="footer">Вид спорта</td>
</tr>
<tr>
<td colspan="4">Футбол</td>
</tr>
</table>

</body>
</html>

VeryMoment · 22 Апр 2025

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Карточка участника</title>
<style>
/* Стили для таблицы */
table {
width: 500px;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #ffff00; /* Желтый фон для заголовков */
}
tr:nth-child(2) td {
background-color: #ffcc99; /* Розовый фон для фамилии */
}
tr:nth-child(3) td {
background-color: #cce5ff; /* Голубой фон для фото */
}
tr:nth-child(4) td {
background-color: #99ff99; /* Зеленый фон для даты */
}
tr:nth-child(5) td {
background-color: #ffcc99; /* Розовый фон для вида спорта */
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2 style="text-align: center;">Карточка участника</h2>
<table>

<tr>
<th>Код</th>
<td>1</td>
</tr>

<tr>
<th>Фамилия</th>
<td>Иванов Иван</td>
</tr>

<tr>
<th>Фото</th>
<td><img src="https://via.placeholder.com/150" alt="Фото участника"></td>
</tr>

<tr>
<th>Дата</th>
<th>Вес</th>
<th>Рост</th>
<th>Пол</th>
</tr>
<tr>
<td>1988</td>
<td>62</td>
<td>175</td>
<td>М</td>
</tr>

<tr>
<th>Вид спорта</th>
<td colspan="3">Футбол</td>
</tr>
</table>
</body>
</html>

Podonok · 22 Апр 2025

ой ну табличка простая сделай так тег table строка tr ячейка td и всё как в фото попробуй сама получится точно

AprattDaurb · 22 Апр 2025

Display: grid;
В помощь

Вопрос Помогите пожалуйста написать таблицу на html

Похожие темы