Как создавать таблицы в html: Создаем самую простую таблицу в HTML.

Leave a Comment / Html / By /

Содержание

Учимся создавать таблицы в html самостоятельно по шагам, тег table

Всем привет! Решил немного активизироваться и приготовил для Вас очередную статью урок в котором мы подробно изучим html таблицы и научимся их создавать. Таблицы, наряду с маркированными, нумерованными списками выполняют одну очень важную задачу для контента — они его структурируют делают более понятным для человека. Все это является форматированием текста документа.

Один очень важный пункт — таблицы html являются подспорьем в продвижении отдельно взятых страниц в SEO. Т.е просто текст работать не будет, а если он будет приправлен графикой, изображениями, списками, то его восприятие человеком будет более сильным и такой текст с легкостью выйдет в ТОП выдачи поисковых систем. Этим уже не удивишь в сфере интернет маркетинга. Однако для новичков — это на заметку. Что ж, продолжим урок.

Содержание

  • 1 Определение HTML таблицы в веб документе
  • 2 Добавление границы html таблицы
  • 3 Сворачиваем границы таблицы
  • 4 Как добавить отступ в ячейке таблицы HTML
  • 5 Как выровнять заголовки в таблице
  • 6 Как добавить интервал между границами таблицы
  • 7 Как объединить несколько ячеек в таблице
  • 8 Как объединить несколько строк в таблице html
  • 9 Как добавить подпись к таблице с помощью тега caption
  • 10 Определение особого стиля для таблицы
  • 11 Использование объединения групп в таблице с помощью тега colgroup
  • 12 Определение элементов таблицы <thead>, <tbody>, <tfoot>

Определение HTML таблицы в веб документе

Все таблицы обозначаются специальным парным тегом  <table></table>

Таблица внутри себя содержит строки, которые обозначаются тегом <tr></tr>  (tr — table row или ряд таблицы) и столбцы, или как их называют ячейки html таблицы, обозначаемые тегом <td></td>  (td — table data или табличные данные)

Не забываем также и о том, что у таблицы есть и заголовок, записываемый тегом <th></th>  (th — table heading или табличный заголовок). По умолчанию они выделены жирным шрифтом и выровнены по центру.

С терминами определились.

Пример:

<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<table>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

</table>

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

д.

Добавление границы html таблицы

Если не указывать границу у таблицы, то она будет отображаться как на примере выше. Нам же нужно их добавить, чтобы видеть очертания. Граница таблицы устанавливается с помощью свойства CSS border :

table, th, td { border: 1px solid black; }

table, th, td {

    border: 1px solid black;

}

Внимание: Не забудьте задать границы как для таблицы, так и для ее ячеек.

Сворачиваем границы таблицы

Как мы видим на примере выше наши границы достаточно широкие и было бы неплохо, если бы они стали одной сплошной линией. За это в CSS отвечает особое свойство border-collapse :

table, th, td { border: 1px solid black; border-collapse: collapse; }

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

Как добавить отступ в ячейке таблицы HTML

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

Чтобы добавить отступ в ячейке html таблицы мы должны воспользоваться свойством под названием padding  Подробнее об отступах я рассказал в этой статье.

th, td { padding: 15px; }

th, td {

    padding: 15px;

}

Как выровнять заголовки в таблице

По умолчанию все заголовки выровнены по центру и выделены жирным шрифтом. Если же мы хотим выровнять по горизонтали заголовки, то воспользуйтесь вот этим свойством text-align

th { text-align: left; }

th {

    text-align: left;

}

Как добавить интервал между границами таблицы

Межграничный интервал задает пространство между ячейками в таблице. Чтобы установить тот самый интервал для всей таблице нужно прибегнуть в еще одному замечательному свойству CSS border-spacing  :

table { border-spacing: 5px; }

table {

    border-spacing: 5px;

}

Примечание: если вы применили свойство border-collapse , чтобы вытянуть границу в одну линию, то свойство border-spacing  иметь своего значения не будет.

Как объединить несколько ячеек в таблице

Может возникнуть ситуация, когда вам необходимо объединить несколько ячеек в один столбец, то используйте атрибут colspan :

<table> <tr> <th>Name</th> <th colspan=»2″>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

<table>

  <tr>

    <th>Name</th>

    <th colspan=»2″>Telephone</th>

  </tr>

  <tr>

    <td>Bill Gates</td>

    <td>55577854</td>

    <td>55577855</td>

  </tr>

</table>

Вот его результат:

Немного поясню пример.

Как мы видим ячеек td у нас три, а заголовков два. И именно к последнему заголовку th мы применили объединение и как бы расширили ячейку. Можете поэкспериментировать и объединить, например, первую ячейку.

Как объединить несколько строк в таблице html

Чтобы объединить ячейке в более чем одной строке, то вам на помощь придет атрибут rowspan :

<table> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan=»2″>Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

<table>

  <tr>

    <th>Name:</th>

    <td>Bill Gates</td>

  </tr>

  <tr>

    <th rowspan=»2″>Telephone:</th>

    <td>55577854</td>

  </tr>

  <tr>

    <td>55577855</td>

  </tr>

</table>

Как добавить подпись к таблице с помощью тега caption

Чтобы добавить подпись к таблице, достаточно внести в код следующую запись с обозначением тега <caption> :

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<table>

  <caption>Monthly savings</caption>

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$50</td>

  </tr>

</table>

Примечание: данный тег должен быть вставлен сразу же после тега <table>  в самом начале

Определение особого стиля для таблицы

Чтобы определить специальный стиль для таблицы, достаточно добавить ей уникальный идентификатор, т. е атрибут id:

<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

12

<table>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

</table>

И сейчас мы можем задать стиль для этого идентификатора:

table#t01 { width: 100%; background-color: #f1f1c1; }

table#t01 {

    width: 100%;

    background-color: #f1f1c1;

}

Немного поясню пример. Создав еще одну таблицу с идентификатром id=t01  мы задали заливку цветом.

Теперь они отличаются по цвету.

Советую вам также ознакомиться со статьей про html цвета и их кодовые обозначения

А теперь для нас может встать такая задача, что заголовок должен быть одного цвета, все четные строки и нечетные также должны различаться по цветам. Для этого мы применим псевдоклассы для строк в таблице (тег <tr> ):

table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { color: white; background-color: black; }

1

2

3

4

5

6

7

8

9

10

table#t01 tr:nth-child(even) {

    background-color: #eee;

}

table#t01 tr:nth-child(odd) {

    background-color: #fff;

}

table#t01 th {

    color: white;

    background-color: black;

}

За все четные строки отвечает псевдокласс :nth-child(even)

За все нечетные строки :nth-child(odd)

Как мы видим использование псевдоклассов задает особый стиль для всей нашей таблицы. Представляете если строк в ней будет больше 30, 40, а нам необходимо ее красиво оформить. Вот тут-то и поможет использование данных псевдоклассов.

Использование объединения групп в таблице с помощью тега colgroup

Например нам необходимо выделить несколько групп в таблице, т.е для одной группы задать одну заливку фона, а для оставшейся выбрать другой цвет. Для этого мы используем теги  <colgroup>и  <col> . Простой пример снизу все объяснит:

<table> <colgroup> <col span=»2″> <col> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<table>

  <colgroup>

    <col span=»2″>

    <col>

  </colgroup>

  <tr>

    <th>ISBN</th>

    <th>Title</th>

    <th>Price</th>

  </tr>

  <tr>

    <td>3476896</td>

    <td>My first HTML</td>

    <td>$53</td>

  </tr>

</table>

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

Определение элементов таблицы <thead>, <tbody>, <tfoot>

Чуть было не забыл упомянуть про следующие теги таблицы:

  • <thead> — эта секция используется для группировки содержимого заголовка
  • <tbody> — то, что мы называем «телом», т.е здесь будет основное содержимое таблицы
  • <tfoot> — нижний колонтитул или проще «подвал» нашей таблицы.

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

На этом урок по созданию html таблиц завершен. Жду вас в следующих выпусках, где мы узнаем очень многое и интересное, что касается разработки и создания сайтов с нуля. Хорошего дня и настроения друзья!

НОУ ИНТУИТ | Лекция | Таблицы в HTML

Аннотация: В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.

Средства описания таблиц в HTML

По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег <PRE> ), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.

Создание таблиц в HTML

Для описания таблиц используется тег <ТАВLЕ> . Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.

Создание строки таблицы — тег <ТR>

intuit.ru/2010/edi»>Тег <ТR> (Таble Row, строка таблицы ) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR></ТR>.

Определение ячеек таблицы — тег <ТD>

Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Число тегов <ТD></ТD> в строке определяет число ячеек (открыть)

<HTML>
<BODY>
  <h2 ALIGN=center>Таблица</h2>
  <CENTER>
  <TABLE BORDER>
    <TR>
      <TD COLSPAN=3>Если в таблице два 
	  тега TR, то в ней две строки.</TD>
    </TR>
    <TR>
      <TD>Если в строке три тега TD,</TD>
      <TD>то в ней</TD>
      <TD>три столбца.</TD>
    </TR>
  </TABLE>
  </CENTER>
</BODY>
</HTML>

Рис. 4.1. Использование таблиц в дизайне

Заголовки столбцов таблицы — тег <ТН>

Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы ). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

<HTML>
<BODY>
  <TABLE BORDER>
    <TR>
      <TH>Заголовок центрирован по умолчанию
      </TH>
      <TH COLSPAN=2>Заголовок может объединять
	            столбцы</TH>
    </TR>
    <TR>
      <TH>Заголовок может быть расположен
	  перед столбцами</TH>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
    <TR>
      <TH ROWSPAN=3>Заголовок может объединять
	            строки</TH>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
  </TABLE>
</BODY>
</HTML>
Использование заголовков таблицы — тег <САРТIОN>

intuit.ru/2010/edi»>Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над ( <САРТION АLIGN=top> ), либо под таблицей ( <САРТION ALIGN=bottom> ). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

<HTML>
<BODY>
  <TABLE BORDER>
  <CAPTION ALIGN=top>Заголовок над таблицей
  </CAPTION>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
  </TABLE>
  <TABLE BORDER>
  <CAPTION ALIGN=bottom>Заголовок под таблицей
  </CAPTION>
    <TR>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
      <TD>Текст или данные</TD>
    </TR>
  </TABLE>
</BODY>
</HTML>
Атрибут NOWRAP

intuit.ru/2010/edi»>Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.

Атрибут СОLSPAN

Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

<HTML>
<BODY>
  <CENTER>
  <TABLE BORDER=3>
    <TR>
      <TD>Если вы хотите сделать какую-нибудь
          ячейку шире, чем верхняя или нижняя,
      </TD>
      <TD>можно воспользоваться атрибутом 
          СОLSPAN=2, </TD>
    </TR>
    <TR>
      <TD BGCOLOR=white COLSPAN=2>чтобы 
          растянуть ее над любым количеством 
          обычных ячеек. </TD>
    </TR>
  </TABLE>
  </CENTER>
</BODY>
</HTML>
Атрибут ROWSPAN

Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться в растягиваемой ячейке. Внизу таблицы ее поместить нельзя.

Атрибут WIDТН

Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы задать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ WIDTH=250>, вы получите таблицу шириной 250 пикселей независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

<HTML>
<BODY>
  <TABLE BORDER WIDTH=100%>
    <TR>
      <TD ALIGN=center>Текст или данные - 
          ширина 100%</TD>
    </TR>
  </TABLE>
или<BR>
  <TABLE BORDER WIDTH=50%>
    <TR>
      <TD ALIGN=center>Текст или данные - 
          ширина 50%</TD>
    </TR>
  </TABLE>
или<BR>
  <TABLE BORDER WIDTH=200>
    <TR>
      <TD ALIGN=center>Текст или данные - 
          ширина 200 пикселов</TD>
    </TR>
  </TABLE>
или<BR>
  <TABLE BORDER WIDTH=100>
    <TR>
      <TD ALIGN=center>Текст или данные - 
          ширина 100 пикселов</TD>
    </TR>
  </TABLE>
</BODY>
</HTML>

Таблицы в HTML — Разделы масштабирования

Обзор

Для организации данных в строки и столбцы используются таблицы в HTML. Таблицы используются для организации такой информации, как изображения, текст и ссылки. Предположим, вы хотите показать данные студента, и просто писать в текстовом формате будет очень неаккуратно; поэтому использование таблиц станет утомительным и понятным для пользователя.

Объем статьи

В этой статье мы узнаем о следующем-

  • Мы начнем с краткого введения в таблицы HTML, а затем перейдем к ячейкам, строкам и заголовкам таблиц.
  • Затем мы перейдем к различным тегам, связанным с таблицами в HTML, и рассмотрим их различные примеры.

Таблицы HTML

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

Для создания таблицы в HTML используется тег

, который является основным контейнером таблицы.

Синтаксис 

 
 <таблица>

Пример 

 
 <таблица>
<тд>17219 <тд>17272

Выход

Заголовок
Данные
Имя Курс Номер заявки
Алиана B.Tech CSE 17218
Мария Технологии моды
Сара Журналистика
Елена MBA 17291
Имя Курс Номер заявления
Алиана B.Tech CSE 17218
Maria Fashion Tech 17219
Sarah Journalism 17272
Elena MBA 17291

We will be looking at , и в этой статье.

Ячейки таблицы

Тег определяется как ячейка в таблицах HTML, содержащая данные.

Синтаксис 

 
 
  <тд>.........
  <тд>.........

Пример 

 
 <таблица>
  
    Сара
    20
    Б.Тех

Выход

Сара 20 B.Tech

Из следующего вывода видно, что создается строка таблицы, содержащая три ячейки таблицы, которые создаются в строке с помощью тега.

Строки таблицы

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

Чтобы создать строку таблицы, мы используем тег.

Синтаксис 

 
 
     Заголовок 
     Содержание

Пример 

 
 <таблица>
   
    Имя
    Возраст
    Курс
   
   
    Сара
    20
    Б. Тех

Выход

Название Возраст Курс
SARAH 20 B.Tech
9004 с выходом, которые можно сказать, что мы можем сказать, что мы можем сказать, что мы можем сказать, что мы можем сказать, что можно сказать, что мы можем сказать, что можно сказать, что можно сказать, что можно сказать, что вы можете сказать, что вы можете сказать, что вы можете сказать, что вы можете сказать, что вы получаете, что вы можете сказать, что вы получаете, что вы можете сказать, что две колонны. , то есть тег.

Для представления ячейки таблицы мы используем заголовки таблицы. Таблицы в HTML могут иметь заголовки как по горизонтали, так и по вертикали.

Для создания заголовка таблицы используется тег.

Синтаксис 

 
 
   <й>.........
   <й>.. .......

Вот пример горизонтального и вертикального заголовков, где мы будем создавать простое расписание.

Пример 

 
 <таблица>
  
    Время/дни
    Понедельник
    Вторник
  
  
    8:00
    Питон
    Ява
  
  
    12 часов дня
    Испанский
    Английский
  
  
    15:00
    Структуры данных
    Сеть

Выход

Time/Days Monday Tuesday
8:00am Python Java
12 noon Spanish English
15:00 Структуры данных Сеть

Как мы видим, заголовки таблиц добавляются как по вертикали, так и по горизонтали. Для этого мы добавили тег в каждый тег.

Теги таблицы HTML

Это различные теги HTML, используемые в таблице.

<тд>59 <тд>80 <тд>45 <тд>55 <тд>40 <тд>64 <тд>90 <тд>85

Выход

Теги Описание
для определения характеристик столбца для каждого столбца.
Используется для создания таблицы.
Используется для создания строк таблицы.
Используется для создания данных/ячеек таблицы.
Используется для создания заголовка таблицы.
Определен заголовок таблицы.
Используется для форматирования группы из одного или нескольких столбцов в таблице.
Используется с элементом
Тело таблицы группируется с его помощью.
Заголовок таблицы группируется с помощью этого тега.
Содержимое нижнего колонтитула группируется с помощью этого тега.

Пример таблиц в HTML

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

Пример 

 
 <таблица>
Имя Физика Химия Математика Всего оценок
Абхишек 60 87 100
Анируд 63 100
Адити 86 100
Пракарш 100
Name Physics Chemistry Maths Total Marks
Abhishek 60 87 59 100
Anirudh 63 80 45 100
Aditi 55 40 86 100
Prakarsh 64 90 85 100

A table is created which contains five rows, and the первая строка содержит только заголовочную часть, созданную с помощью тега.

Поддерживаемые браузеры

Таблицы в HTML поддерживаются следующими браузерами —

  • Chrome
  • Microsoft Edge
  • Сафари
  • Фаерфокс
  • Internet Explorer
  • Опера

Заключение

  • Данные организованы в строки и столбцы с помощью таблиц HTML. Таблицы используются для организации таких данных, как фотографии, текст и гиперссылки.
  • Тег используется для создания строк таблицы, тег используется для определения заголовков таблицы, а тег используется для данных/ячеек таблицы.

Время испытаний!

Время проверить свои навыки и выиграть награды!

Примечание. Награды будут начислены после следующего обновления продукта.

Создание промежуточных таблиц HTML | Промежуточные таблицы UdacityHTML

Назад Создание промежуточных таблиц HTML

Использование таблиц дает вам гибкость детализации и организации определенных областей контента для вашего зрителя. Создание промежуточных таблиц использует как HTML (язык гипертекстовой разметки), так и CSS (каскадные таблицы стилей). Как вы знаете из предыдущих руководств, HTML — это базовый код, который используется для структурирования веб-страницы и ее содержимого, а CSS используется для улучшения вашей веб-страницы элементами творческого дизайна.

В этом уроке мы рассмотрим, как создавать промежуточные таблицы: управлять количеством строк и столбцов, определять ширину таблицы, а также объединять ячейки таблицы. Кроме того, мы покажем вам, как добавить некоторые творческие цвета фона в отдельные ячейки. Все, что вам нужно для начала, — это простой редактор кода, такой как Notepad ++, который является бесплатным.

Основы промежуточной таблицы

Давайте рассмотрим простые теги HTML, которые изначально используются для создания таблицы.

Тег
Определяет HTML-таблицу.
Тег
Определяет строку таблицы.
Тег Определяет заголовок таблицы. По умолчанию текст в элементах выделяется жирным шрифтом и располагается по центру.
Тег Определяет каждую ячейку таблицы. По умолчанию текст в элементах обычный (не полужирный) и выровнен по левому краю.

Код HTML для простой таблицы будет выглядеть следующим образом: Таблица HTML


  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
Строка 2, ячейка 1 Строка 2 , ячейка 2 Строка 2, ячейка 3
Строка 3, ячейка 1 Строка 3, ячейка 2 Строка 3, ячейка 3


Вывод на вашей веб-странице таков:

Чего вам не хватает? Было бы неплохо иметь схему таблицы, чтобы я мог видеть фактическое расположение строк и столбцов. Я могу просто добавить тег границы к самой таблице.

Добавить границу



HTML9 Table

0005


  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
Строка 2, ячейка 1 Строка 2, ячейка 2 Строка 2, ячейка 3
Строка 3, ячейка 1 Строка 3, ячейка 2 Строка 3, ячейка 3


Теперь я могу лучше видеть настоящую таблицу определенный.

Добавить диапазон столбцов таблицы (td colspan)

Еще одна полезная функция — возможность комбинировать ячейки из одного столбца в другой. Я называю это Column Span или td column span , потому что мы объединяем ячейки таблицы. Как вы помните выше, тег представляет ячейку таблицы. Вы будете использовать тег colspan для создания этой функции. Обратите внимание, что в следующем коде я удалил третью ячейку таблицы, поскольку целью является объединение двух ячеек.

Используйте следующий код:




HTML Table


  
    
    
    
  
  
    
    
Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
Строка 2, ячейка 1 Обратите внимание на ячейки таблицы, объединенные в одну.

Добавить диапазон строк (td rowspan)

В то время как диапазон столбцов объединяет ячейки таблицы в 2 или более столбцах, диапазон строк просто объединяет ячейки в 2 или более строках.

Используйте следующий код:




HTML Table


  
    
    
    
  
  
    
    
Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
Строка 2, ячейка 1

Определение ширины таблицы

Вы можете легко определить ширину таблицы, добавив простое определение HTML. Вы можете использовать проценты или пиксели для определения ширины таблицы. Для этого примера я добавляю 600px ширина , чтобы сделать таблицу шире.




HTML Table


  
    
    
    
  
  

    
    
  
  
    
    
    
  
Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
Строка 2, ячейка 1 Строка 2, ячейка 2 и 3 Строка 2, ячейка 3
Строка 3, ячейка 1 Строка 3, ячейка 2

Теперь у нас есть более широкая таблица, которая также расширяет ячейки таблицы.

Добавление цветов к ячейкам таблицы

Вам не нужно жить с простой белой фоновой таблицей, когда вы можете легко придать своему фону цвет CSS. И практично, и эстетично иметь цвет в строке заголовка. При этом убедитесь, что цвет текста хорошо читается на фоне цвета фона. Здесь мы предлагаем несколько разных цветов, чтобы показать вам несколько творческих примеров.

Все, что я сделал, это добавил шестнадцатеричный цвет в ячейку таблицы. В данном случае я добавил его в тег

, определяющий заголовок таблицы.


  
    
    
    
  
  
    
    
    
  
  
    
    
    
  
Заголовок столбца 1 2 заголовок Заголовок столбца 3
Строка 2, ячейка 1 Строка 2, ячейка 2 и 3 Строка 2, ячейка 3
Строка 3, ячейка 1 Строка 3, ячейка 2

Теперь у вас есть таблица, которая начинает показывать ваш творческий стиль.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *