Согласие на обработку персональных данных.

10.01.2021
Новый выпуск журнала Автоматизация и Программирование.

08.12.2020
Новые видео и статья Таблицы в HTML.

03.12.2020
Новый выпуск журнала Автоматизация и Программирование.

15.11.2020
Новые видео и статья Процедура Str.

25.10.2020
Добавлен курс Как стать веб-разработчиком.



Раздел: Сайтостроение / HTML /

Таблицы в HTML

Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:

>>> Вёрстка сайта с нуля 2.0 >>>

Большие объёмы данных очень часто удобнее воспринимать в виде таблиц. Поэтому в HTML с самого начала была заложена возможность создания и отображения таблиц. В этой статье - первое знакомство с таблицами в HTML...

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

  • Тег table создаёт таблицу.
  • Тег tr создаёт строку таблицы.
  • Тег td создаёт ячейку таблицы.

На первый взгляд это может показаться сложным. Но на самом деле это лишь вопрос привычки. Давайте создадим простейшую “одноклеточную” таблицу, то есть таблицу где будет всего один столбец, одна строка и одна ячейка. HTML-код может выглядеть так:

<table>    <!-- Начало таблицы -->
  <tr>     <!-- Начало строки таблицы -->
    <td>   <!-- Начало ячейки в строке таблицы -->
    Текст в ячейке
    </td>  <!-- Конец ячейки в строке таблицы -->
  </tr>    <!-- Конец строки таблицы -->   
</table>   <!-- Конец таблицы -->

Да, не так просто, как хотелось бы. Но, повторюсь, это дело привычки.

Содержимое, как видите, может находиться между тегами <td> и </td>.

Если вы хотите, чтобы в строке было несколько ячеек, то вам придётся использовать несколько пар тегов <td> и </td>. Если вы хотите добавить строку к таблице, то нужно добавить пару тегов <tr> и </tr>.

ВАЖНО! Количество ячеек в строках должно быть одинаковым. Например, если у вас в первой строке 3 ячейки, то и во второй и во всех последующих строках должно быть также 3 ячейки. Иначе таблица получится кривой. Этот вопрос можно решить, но я расскажу об этом в следующих статьях.

Обычно браузеры по умолчанию отображают таблицы без прорисовки границ. Если вы хотите, чтобы таблица/строка/ячейка была обведена рамкой, то сделать это можно так:

<table border="1px">    
  <tr>     
    <td>   
    Таблица с рамкой
    </td>  
  </tr>    
</table>

А выглядеть это будет так:

Простейшие таблицы в HTML

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

Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.


Как создать свой сайт Как создать свой сайт

Очень небольшая книга, которую можно прочитать буквально за 15 минут. Но эти 15 минут дадут вам представление о том, как создаются современные сайты... Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика