0Pricing
HTML for Kids · Урок

Таблицы: организуем данные

Узнайте, как создавать таблицы для отображения информации

«Таблицы: организуем данные» — бесплатный урок HTML for Kids на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 4 уроков всего.

Таблицы: упорядочивание данных

Добро пожаловать в следующий урок! Сегодня мы узнаем, как создавать таблицы в HTML. Таблицы отлично подходят для упорядочивания информации в строках и столбцах.

Таблицы: организуем данные — иллюстрация 1

Что такое таблицы?

Таблицы позволяют отображать информацию в структурированном виде. Каждая таблица состоит из строк и столбцов.

Вот как выглядит таблица:

Name      Age      City

Alice     12       New York

Bob       15       London

Давайте создадим эту таблицу с помощью HTML!

Создание простой таблицы

Таблицы в HTML создаются с помощью тега <table>. Строки создаются с помощью тега <tr>, а ячейки — с помощью тега <td>.

Пример:

<table>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Добавление заголовка таблицы

Вы можете добавить заголовки в таблицу с помощью тега <th>. Заголовки делают таблицу более понятной.

Пример:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Добавление границы к таблице

По умолчанию у таблиц нет границ. Вы можете добавить границу с помощью атрибута border или CSS.

Пример:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Объединение столбцов и строк

Иногда требуется, чтобы ячейка занимала несколько столбцов или строк. Для этого используйте атрибут colspan или rowspan.

Пример:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Стилизация таблицы

С помощью CSS можно улучшить внешний вид таблицы. Например, можно изменить цвета, добавить внутренние отступы или выровнять текст.

Пример:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: lightgray;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

Попробуйте сами

Давайте создадим таблицу со списком ваших любимых фильмов. Вот пример:

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorite Movies</title>
  </head>
  <body>
    <h1>My Favorite Movies</h1>
    <table border="1">
      <tr>
        <th>Movie</th>
        <th>Year</th>
        <th>Genre</th>
      </tr>
      <tr>
        <td>Inception</td>
        <td>2010</td>
        <td>Science Fiction</td>
      </tr>
      <tr>
        <td>The Lion King</td>
        <td>1994</td>
        <td>Animation</td>
      </tr>
    </table>
  </body>
</html>

Отличная работа!

Поздравляем! Вы научились создавать таблицы, добавлять заголовки и даже стилизовать их. Таблицы отлично подходят для упорядочивания и отображения данных. В следующем уроке мы узнаем о формах для сбора данных, введённых пользователями. Приготовьтесь сделать свои страницы интерактивными!

Таблицы: организуем данные — иллюстрация 10

Часто задаваемые вопросы

Урок «Таблицы: организуем данные» бесплатный?

Да — полный текст урока «Таблицы: организуем данные» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 4 уроков всего.

Чему я научусь в уроке «Таблицы: организуем данные»?

Узнайте, как создавать таблицы для отображения информации Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML for Kids?

Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Таблицы: организуем данные»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML for Kids?

Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Таблицы: организуем данные
  2. Формы: собираем данные от пользователей
  3. Атрибуты HTML
  4. Мультимедиа: добавляем видео и аудио
← Назад к HTML for Kids