Таблицы HTML: как создавать и стилизовать таблицы с помощью HTML

HTML Изучение

HTML

Таблицы обычно используются в HTML для организации и отображения данных. Их использование очень разнообразно, и они помогают упростить передачу информации пользователям веб-страницы.

В сегодняшнем руководстве мы рассмотрим основы таблиц в HTML, а также расскажем, как использовать необходимые теги и стили CSS в ваших таблицах.

Основы HTML-таблиц

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

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

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

  • <table>: определяет таблицу HTML
  • <tr>: определяет каждую строку таблицы
  • <th>: он определяет каждую строку таблицы
  • <th>: определяет каждый заголовок таблицы
  • <td>: определяет данные каждой таблицы или ячейку

Примечание: все <th>элементы по умолчанию выделены жирным шрифтом и центрированы, а <td>текстовые элементы выровнены по левому краю.

<table style=»width:100%»>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Ruffallo</td>
    <td>54</td>
  </tr>
  <tr>
    <td>Reese</td>
    <td>Witherspoon</td>
    <td>48</td>
  </tr>
</table>

Есть много других элементов HTML, которые можно использовать для настройки внешнего вида и структуры таблиц. Они включают в себя <thead>, <tbody>, <tfoot>, которые мы обсудим позже.

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

Подписи и заголовки таблиц

Большинству таблиц нужен какой-то текст, описывающий назначение таблицы. Мы можем использовать

элемент для решения этой проблемы. Это необязательно. Но поскольку он отображает заголовок (или заголовок) таблицы, это упрощает использование и доступность.

При использовании он идет сразу после <table>открывающего тега и сопровождается соответствующим закрывающим тегом:

<caption>Neonates Immunization Table</caption>

Также часто встречаются ячейки таблицы, которые описывают группы данных в таблице. <thead> Элемент определяет набор строк, которые представляют собой головку столбцов таблицы. Это необязательный элемент, который может располагаться либо сразу после <table>тега, либо после </caption>тега, если он доступен.

В <th>тег метки клетка как заголовок таблицы, и это, как правило, в начале строки или столбца. <th>Теги всегда используются внутри <tr>тега, и они имеют некоторый стиль по умолчанию, чтобы помочь им выделиться.

<thead>
   <tr>
     <th scope="col">Name</th>
     <th scope="col">Sex</th>
     <th scope="col">Weight(kg)</th>
     <th scope="col">Immunization Doses</th>
   </tr>
</thead>

Итоговые таблицы с нижним колонтитулом

Читайте также:  Как внести свой вклад в проект Python с открытым исходным кодом

<tfoot>Элемент является необязательным элементом, который определяет набор строк, суммирующих столбцы таблицы макета. Обычно он идет после <tbody>тега.

<tfoot>
    <th>Mean Weight (kg)</th>
    <td>2.9</td>
</tfoot>

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

Раньше границы могли быть добавлены в вашу HTML-таблицу с помощью атрибута border, который автоматически принимает число в пикселях. Этот атрибут может быть добавлен только к <table>тегу, и он дает границу таблице и каждой ячейке.

<table border='1'>
   <tr>
       <th >Jerry Holmes</th>
       <td>M</td>
       <td>5</td>
       <td></td>
       <td>3.5</td>
   </tr>
</table>

Это поведение было объявлено устаревшим в HTML5 и заменено свойством CSS border. Благодаря этому изменению теперь можно добавлять границы по таблице или к отдельным элементам. Если вы не хотите, чтобы у ваших ячеек были отдельные границы, вы должны установить border-collapseсвойство на сворачивание. В противном случае соседние ячейки имели бы четкие границы.

table {
   border-collapse: collapse;
}
td, th {
   border: 1px solid rgba(0, 0, 0, 0.5);
}

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

Распределить по нескольким строкам и столбцам

Обратите внимание, что в создаваемой нами таблице ячейка «Средний вес» охватывает более одной ячейки, а «Дозы иммунизации» выглядят как «суперзаголовок» с подзаголовками (взятыми и оставленными).

Такое поведение стало возможным с colspan и rowspan атрибутами. Оба атрибута принимают числовое значение, которое представляет собой количество строк или столбцов, которые вы хотите охватить.

<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">Sex</th>
    <th colspan="2">Immunization Doses</th>
    <th rowspan="2">Weight(kg)</th>
    <tr>
      <th>Taken</th>
      <th>Left</th>
    </tr>
  </tr>
</thead>

rowspan Атрибут позволяет содержимое пролета ячейки таблицы нескольких строк. В примере кода выше, мы сделали «Name», «Sex»и «Weight«заголовок ячейки охватывают два ряда.

Читайте также:  Как работает Desktop-as-a-Service (DaaS)?

colspan Делает один пролет ячейки таблицы шириной более одного столбца или данных клеток. Используя colspanатрибут, мы заставляем заголовок «Дозы иммунизации» занимать два столбца (и одну строку). Затем при добавлении подзаголовков в следующую строку они автоматически добавляются в раздел «Дозы иммунизации».

Таблицы стилей с помощью CSS

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

  • align: Использование CSS margin-left, margin-rightили margin: autoсвойства вместо.
  • bgcolor: для достижения аналогичного эффекта используйте background-colorсвойство CSS
  • border: использовать сокращенное свойство границы CSS
  • width: использовать свойство ширины CSS

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

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

thead,
tfoot {
 font-size: 18px;
}

Пример кода HTML-таблицы

HTML

<!DOCTYPE html>
<html lang=»en»>
 <head>
   <meta charset=»UTF-8″ />
   <meta http-equiv=»X-UA-Compatible» content=»IE=edge» />
   <meta name=»viewport» content=»width=device-width, initial-scale=1.0″ />
   <link rel=»stylesheet» href=»index.css» />
   <title>Document</title>
 </head>
 <body>
   <table>
     <caption>
       Neonates Immunization Table
     </caption>
     <thead>
       <tr>
         <th rowspan=»2″>Name</th>
         <th rowspan=»2″>Sex</th>
         <th colspan=»2″>Immunization Doses</th>
         <th rowspan=»2″>Weight(kg)</th>
         <tr>
           <th>Taken</th>
           <th>Left</th>
         </tr>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th scope=»row»>Mary Bridget</th>
         <td>F</td>
         <td>1</td>
         <td>4</td>
         <td>3.0</td>
       </tr>
       <tr class=»darker»>
         <th scope=»row»>Ryan Adams</th>
         <td>M</td>
         <td>2</td>
         <td>3</td>
         <td>2.4</td>
       </tr>
       <tr>
         <th scope=»row»>Stan Raji</th>
         <td>M</td>
         <td>2</td>
         <td>3</td>
         <td>3.6</td>
       </tr>
       <tr class=»darker»>
         <th scope=»row»>Kemi Uche</th>
         <td>F</td>
         <td>3</td>
         <td>2</td>
         <td>2.0</td>
       </tr>
       <tr>
         <th scope=»row»>Jerry Holmes</th>
         <td>M</td>
         <td>5</td>
         <td>0</td>
         <td>3.5</td>
       </tr>
     </tbody>
     <tfoot>
       <tr>
         <th colspan=»4″>Mean Weight Recorded (kg)</th>
         <td>2.9</td>
       </tr>
     </tfoot>
   </table>
 </body>
</html>

CSS (SCSS)

body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, «Segoe UI», «Roboto», «Oxygen»,
   «Ubuntu», «Cantarell», «Fira Sans», «Droid Sans», «Helvetica Neue»,
   sans-serif;
 height: 100%;
 width: 100%;
 display: flex;
 justify-content: center;
 padding-top: 2em;
}
table {
 border-collapse: collapse;
 text-align: left;
 background-color: rgb(255, 255, 255);
}
caption {
 padding-bottom: 5px;
}
thead,
tfoot {
 background-color: #cce;
 font-size: 18px;
}
td,
th {
 padding: 5px;
 border: 1px solid rgba(0, 0, 0, 0.5);
}
.darker {
 background-color: rgb(230 232 232);
}

Следующие шаги для вашего обучения

На этом мы завершаем то, что нам нужно знать, чтобы приступить к реализации таблиц в HTML. Вы можете использовать то, что вы узнали здесь, и свои существующие знания HTML и CSS, чтобы начать проектировать и реализовывать красивые и функциональные таблицы.

Следующие шаги по освоению HTML и CSS:

  • Анимировать код CSS.
  • CSS позиции.
  • HTML-ссылки.
  • HTML-формы.
Оцените статью
bestprogrammer.ru
Добавить комментарий