Создание HTML таблицы

CMS.BY

Создание таблицы в 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 и добавлять заголовок и изображения для лучшего визуального представления информации.

Редакция CMS.BY

Редакция CMS.BY

С нами Мир познавать проще и надёжнее

shape

У Вас остались вопросы? Обязательно обратитесь к нам
Мы проконсультируем Вас по любому вопросу в сфере IT

Оставить заявку