Таблицы в 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>

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

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

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

Вступить в группу "Основы программирования"

Подписаться на канал в РУТУБ

Подписаться на Дзен-канал

Подписаться на рассылки по программированию

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

Очень небольшая книга, которую можно прочитать буквально за 15 минут. Но эти 15 минут дадут вам представление о том, как создаются современные сайты... Подробнее...

Помощь в технических вопросах

Помощь студентам. Курсовые, дипломы, чертежи (КОМПАС), задачи по программированию: Pascal/Delphi/Lazarus; С/С++; Ассемблер; языки программирования ПЛК; JavaScript; VBScript; Fortran; Python; C# и др. Разработка (доработка) ПО ПЛК (предпочтение - ОВЕН, CoDeSys 2 и 3), а также программирование панелей оператора, программируемых реле и других приборов систем автоматизации. Подробнее...

Главная
Контакты