Теги TR, TD и TH

План заработка в Интернете

Как правильно выбрать партнерские программы, чтобы гарантированно зарабатывать? Что необходимо сделать вначале, чтобы ваш заработок был стабильным и предсказуемым? Возможно ли стартовать вообще без денег и каких-либо вложений в рекламу? Этот план поможет вам сделать первые шаги к заработку, даст ответы на важные вопросы и убережет от ошибок в начале пути. Подробнее...

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

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

Продолжаем изучать таблицы, и сегодня чуть подробнее об основных табличных тегах TR и TD, а также о малоизвестном теге TH.

Тег TR

Этот тег определяет строку таблицы. В строке могут расположиться одна или несколько ячеек. На строку распространяется действие атрибутов таблицы, но тег TR также может иметь свои атрибуты. Основные атрибуты - это атрибуты выравнивания, цветов фона, границ и т.п.

Во всех строках таблицы столько же ячеек, сколько их в самой длинной строке таблицы. Браузер автоматически добавляет ячейки в строки, где задано меньше ячеек, чем в самой длинной строке. Пример:

<table border="1px">  
  
  <tr>
    <td>   
    Ячейка 1-1
    </td> 
    <td>   
    Ячейка 1-2
    </td> 
    <td>   
    Ячейка 1-3
    </td>
  </tr>
  
  <tr>        
    <td>   
    Ячейка 2-1
    </td>
  </tr>
  
</table>

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

Во втором теге TR меньше ячеек, чем в первом

Теги TH и TD

Тег TD определяет ячейку таблицы. Мы уже делали это много раз. А вот про тег TH я ещё не говорил. Отчасти потому, что лично я его никогда не использую. Но на вкус и цвет товарища нет, поэтому кому-то это может понравиться.

Тег TH определяет заголовочную ячейку. Отличие от ячейки TD состоит лишь в том, что в ячейке ТН браузер отображает шрифт жирным, подразумевая, что это некая заголовочная ячейка. В этих ячейках по умолчанию данные выравниваются по центру (в отличие от ячеек TD, где по умолчанию данные выравниваются по левому краю).

Пример:

<table border="1px" cellpadding="10px">  
  
  <tr>
    <th>   
    Заголовок 1-1
    </th> 
    <th>   
    Заголовок 1-2
    </th>
    <th>   
    Заголовок 1-3
    </th>
  </tr>
  
  <tr>        
    <td>   
    Текст 1-1
    </td> 
    <td>   
    Текст 1-2
    </td> 
    <td>   
    Текст 1-3. Длинный текст, чтобы увидеть выравнивание заголовка.
    </td> 
  </tr>
  
</table>

Выглядит это примерно так:

В теги TH и TD можно помещать всё, что угодно - текст, рисунки, видео, формы и т.п. В том числе и другие таблицы.

На этом пока всё - будем идти к великой цели маленькими шагами. Если хотите шагнуть сразу широко и познать все премудрости HTML за несколько дней (или даже часов - зависит от вашей выносливости), то изучите курс о вёрстке сайтов.

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

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

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

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

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

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

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

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

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