Создание таблицы в HTML - это один из базовых элементов для любого веб-сайта. В этом гайде мы рассмотрим, как создать таблицу в HTML, добавить заголовок и картинку внутри нее.
1. Создайте новый файл с расширением .html и назовите его table.html. Этот файл будет содержать вашу таблицу.
2. Создайте базовый код HTML для страницы, включая теги head и body. Код будет выглядеть так:
<DOCTYPE html>
<html>
<head>
<title>Моя таблица</title>
</head>
<body>
<table>
<!-- Здесь будет ваша таблица -->
</table>
</body>
</html>
3. Добавьте тег table внутри тега body. Это тег, который указывает на то, что вы создаете таблицу.
4. Добавьте заголовок таблицы. Для этого используйте тег thead и тег tr с атрибутом scope="col" для каждой ячейки заголовка таблицы. Атрибут scope указывает, что ячейка является заголовком столбца. Код будет выглядеть так:
<DOCTYPE html>
<html>
<head>
<title>Моя таблица>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Заголовок 1</th>
<th scope="col">Заголовок 2</th>
<th scope="col">Заголовок 3</th>
</tr>
</thead>
<tbody>
<!-- Здесь можно добавить строки таблицы -->
</tbody>
</table>
</body>
</html>
5. Добавьте строки таблицы внутри тега tbody. Для каждой строки используйте тег tr и для каждой ячейки таблицы используйте тег td. Код будет выглядеть так:
<DOCTYPE html>
<html>
<head>
<title>Моя таблица>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Заголовок 1</th>
<th scope="col">Заголовок 2</th>
<th scope="col">Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
<td>Ячейка 1-3</td>
</tr>
<tr>
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
<td>Ячейка 2-3</td>
</tr>
<tr>
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
<td>Ячейка 3-3</td>
</tr>
</tbody>
</table>
</body>
</html>
6. Добавьте изображение внутри ячейки таблицы. Для этого используйте тег img с атрибутом src, указывающим на изображение. Код будет выглядеть так:
<DOCTYPE html>
<html>
<head>
<title>Моя таблица>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Заголовок 1</th>
<th scope="col">Заголовок 2</th>
<th scope="col">Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
<td><img src="img/image.jpg" alt="Изображение"></td>
</tr>
<tr>
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
<td><img src="img/image.jpg" alt="Изображение"></td>
</tr>
<tr>
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
<td><img src="img/image.jpg" alt="Изображение"></td>
</tr>
</tbody>
</table>
</body>
</html>
7. Сохраните файл и откройте его в браузере, чтобы увидеть результат. Теперь у вас есть таблица HTML с заголовком и изображением внутри нее.
Таким образом, вы можете создавать таблицы в HTML и добавлять заголовок и изображения для лучшего визуального представления информации.
