Чат PHP-разработчиков
Как создать таблицу в HTML: тег table

Создаём таблицу в HTML: тег table

Для того, чтобы осуществлять разметку на страницах web документов, применяется немало всевозможных объектов. Наиболее сложными из всех, с точки зрения новичка, являются именно таблицы. Как показывает практика, именно они, а никак не заголовки или, скажем, абзацы, доставляют тем, кто осваивает HTML, немало проблем. А используются таблицы на практике весьма часто.

Именно таблицам, как вы уже могли догадаться, будет посвящен данный уровень. Я расскажу вам о том, как создать таблицу в HTML. Мы будем идти от самых простых таблиц к более сложным. Более того, вы узнаете, как можно красиво оформить их с помощью CSS. И когда вы пройдете этот уровень, внимательно изучив каждый урок, таблицы вам перестанут казаться такой уж непосильной и сложной задачей. Итак, давайте узнаем как создать таблицу в HTML.

Добавление строк

Самая простая таблица в HTML создается с помощью трех тегов.

Тег <table>. Обозначает непосредственно саму таблицу.
Тег <tr>. Предназначен для обозначения строк таблицы. Является аббревиатурой, которая расшифровывается как "table row".
Тег <td>. Аналогично, аббревиатура, которая читается как "table data". Используется для обозначения ячейки внутри строки таблицы.

Данные три тега располагаются друг относительно друга по следующим правилам:

  • <td> – внутри тега <tr>;
  • <tr> – внутри тега <table>.

Как правило, текстовая информация, присутствующая в таблице, хранится в тегах <td>.

Создавая простую страницу в HTML, следует учитывать тот факт, что все строки должны иметь одно и тоже количество ячеек. Иными словами, количество тегов <td>, присутствующих внутри <tr>, должно быть одинаковым.

Добавление столбцов

Итак, мы разобрались, как происходит добавление строк. А теперь давайте поговорим о столбцах.

Чтобы в таблице появился столбец, необходимо в тег <tr> (строку) добавить как минимум по одному тегу <td> (ячейке).

Давайте создадим простейшую таблицу на новой страничке table.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
</head>
<body>
<table>
    <tr>
        <td>Верхняя левая ячейка</td><td>Верхняя правая ячейка</td>
    </tr>
    <tr>
        <td>Нижняя левая ячейка</td><td>Нижняя правая ячейка</td>
    </tr>
</table>
</body>
</html>

В браузере результат будет выглядеть так:
Пример таблицы

На этом первый урок по созданию таблиц в HTML завершён. Делайте домашку и переходите к следующему уроку.

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • создайте таблицу размерностью 3x2
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (10)


ImmortalPsych
<!DOCTYPE=html>
<head>
    <meta charset="utf-8">
    <title>Таблчика</title>
    <meta name="keywords" content="что угодно">
</head>
<body>
<table>
    <tr>    <td></td>               <td>Золото</td>     <td>Серебро</td>        <td>Бронза</td>         <td>Всего</td>      </tr>
    <tr>    <td>Россия</td>         <td>8</td>          <td>15</td>             <td>19</td>             <td>38</td>         </tr>
    <tr>    <td>Белоруссия</td>     <td>6</td>          <td>14</td>             <td>17</td>             <td>33</td>         </tr>
    <tr>    <td>Азербайджан</td>    <td>2</td>          <td>10</td>             <td>19</td>             <td>27</td>         </tr>
</table>
</body>
</html>

Ой чёта изи))

nastasya95
<!DOCTYPE html>
<html>
<head>

<meta charset = "utf-8">
<title>table</title>
<meta name ="keywords" content ="sedffffffff, sdfffffffffff, sdfffffffffff, sdfffff">
<meta name ="description" content ="sedffffffff sdfffffffffff sdfffffffffff sdfffff dffffffffff ">

</head>
<body>

<table>

<tr> <td>Верхняя левая ячейка</td>  <td>Верхняя правая ячейка</td> 
</tr>

<tr> <td>Средняя левая ячейка</td> <td>Средняя правая ячейка</td>
</tr>

<tr>  <td>Нижняя левая ячейка</td>  <td>Нижняя правая ячейка</td>
</tr>

</table>
</body>
</html>
ReyJiz
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1px" align="center">
        <tr>
            <td>Верхняя левая ячейка</td>
            <td>Верхняя правая ячейка</td>
        </tr>
        <tr>
            <td>Средняя левая ячейка</td>
            <td>Средняя правая ячейка</td>
        </tr>
        <tr>
            <td>Нижняя левая ячейка</td>
            <td>Нижняя правая ячейка</td>
        </tr>
    </table>
</body>
</html>
classic17071999@mail.ru
<table>
    <tr><td>Получатель</td> <td>Сумма</td>  <td>Комиссия</td>   <td>Всего</td></tr>
    <tr><td>ФИО</td><td>1.400$</td><td>5,00$</td><td>1.395$</td></tr>
    <tr><td>ФИО</td><td>2.000$</td><td>2,00$</td><td>1.998$</td></tr>
    <tr><td>ФИО</td><td>1.150$</td><td>9,00$</td><td>1.141$</td></tr>
    <tr><td>ФИО</td><td>2.220$</td><td>6,00$</td><td>2.214$</td></tr>
</table>

Что в голову пришло, то сделал xD

ivashkevich

Норм табличка

Lynatik0100
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Домашка по таблицам </title>
</head>
<body>
<table>
    <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>
</table>
</body>
</html>
ivashkevich

Ок, только нужно было 3*2 =)

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований