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

<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>, которые мы обсудим позже.

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

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

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

Также часто встречаются ячейки таблицы, которые описывают группы данных в таблице. <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>

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

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

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

<table border='1'>
   <tr>
       <th >Jerry Holmes</th>
       <td>M</td>
       <td>5</td>
       <td>0</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 атрибутами. Оба атрибута принимают числовое значение, которое представляет собой количество строк или столбцов, которые вы хотите охватить.

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

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-формы.