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

Теги TR, TD и TH

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

Как научиться верстать сайты любой сложности и под любые устройства, даже если сейчас Вы не знаете, что такое HTML? Есть несколько способов, но самый доступный - это видеокурс. Подробнее...

Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о 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

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

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


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

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

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

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