Содержание

Таблица без рамки | htmlbook.ru

Хотя линии между ячейками позволяют четко отделить одни данные от других, ту же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок при этом допустимо задать другого цвета, как показано на рис. 1.

Рис. 1. Вид таблицы без рамки

Для изменения цвета фона таблицы используем свойство background, добавляя его к селектору TABLE. Для красоты внизу таблицы рисуем линию с помощью свойства border-bottom (пример 1).

Пример 1. Создание таблицы без рамки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-bottom: 2px solid maroon; /* Линия внизу таблицы */
    background: #fffacd; /* Цвет фона таблицы */
   }
   TH {
    background: maroon; /* Цвет фона заголовка */
    color: white; /* Цвет текста */
    text-align: left; /* Выравнивание по левому краю */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Поскольку содержимое тега <th> исходно выравнивается по центру, то для изменения этой характеристики в данном примере применяется стилевое свойство text-align со значением left. Можно поступить наоборот и задать выравнивание по центру для ячеек <td>. Но содержимое первой колонки с названиями камней лучше оставить выровненным по левому краю. Чтобы установить для разных колонок различное выравнивание содержимого рассмотрим два способа.

Первый метод заключается в использовании тега <col>, он добавляется в контейнер <table> и устанавливает, в частности, выравнивание для отдельных колонок (пример 2).

Пример 2. Выравнивание с помощью тега <col>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-bottom: 2px solid maroon; /* Линия внизу таблицы */
    background: #fffacd; /* Цвет фона таблицы */
   }
   TH {
    background: maroon; /* Цвет фона заголовка */
    color: white; /* Цвет текста */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
  <!-- Выравнивание первой колонки по левому краю -->
  <col align="left">
 
  <!-- Выравнивание остальных колонок по центру -->
  <col span="3" align="center">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Атрибут align тега <COL> указывает, по какой стороне выравнивать ячейки колонки, а span определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег <col> работает только для одной колонки.

Выравнивание содержимого колонок с помощью тега <col> работает в браузере Internet Explorer и не действует в браузере Firefox и некоторых других.

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

Создаем стилевой класс, например, с именем jewel и применяем его к ячейкам левой колонки (пример 3).

Пример 3. Выравнивание с помощью стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-bottom: 2px solid maroon; /* Линия внизу таблицы */
    background: #fffacd; /* Цвет фона таблицы */
   }
   TH {
    background: maroon; /* Цвет фона заголовка */
    color: white; /* Цвет текста */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг текста */
    text-align: center; /* Выравнивание по центру */
   }
   TD.jewel {
    text-align: left; /* Выравнивание по левому краю */
    background: #ccc; /* Цвет фона */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

В данном примере изменяется цвет фона и способ выравнивания для всех ячеек, где установлен атрибут. Результат примера показан на рис. 2.

Рис. 2. Таблица без рамки с выделенной левой колонкой

HTML Таблицы



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

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента <table> парный блочный тег <tr> (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов

<tr> вы добавите, столько строк в таблице и будет. Открывающий тег <tr> обозначает начало новой строки таблицы. После него помещаются элементы <td> (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента <td> вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом </tr>.

Элемент <th> (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент

<td>, однако его назначение — создание заголовка строки или столбца. Как правило, элемент <th> размещают в первой строке таблицы. Браузеры отображают текст в элементе <th> жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента <th> помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.

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

Пример: Простая HTML-таблица

Заголовок 1
Заголовок 2Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

<table>
  <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
  <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
  <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
</table>        

Граница таблицы

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

border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так:

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

Пример: Применение свойства

border
Заголовок 1Заголовок 2Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Рамка вокруг таблицы</title> <style> table, th, td { border: 1px solid black; } </style> </head>
  <body>   <table>   <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>   <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>   <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>   </table>   </body>
</html>
Свойство border следует устанавливать как для самой таблицы <table> так и для её ячеек <th> и <td>.

Одинарная рамка для таблицы

По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:

<style>
  table {
    border-collapse: collapse;
  }
</style>

Пример: Применение свойства

border-collapse
Заголовок 1Заголовок 2Заголовок 3
Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
Ячейка 3×1 Ячейка 3×2 Ячейка 3×3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Рамка вокруг таблицы</title> <style> table { border-collapse: collapse; } th, td { border: 1px solid black; } </style> </head>
  <body>   <table>   <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>   <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>   <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>   </table>   </body>
</html>

Поля и интервалы таблицы

По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу <td> или <th>. Интервал ячеек (border-spacing) — это расстояние между ними (<td> или <th>). Сначала присвойте значение separate свойству border-collapse элемента <table>, а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента <table>, но в спецификации HTML5 они были признаны устаревшими.

Пример использования padding и border-spacing:

Пример: Применение свойств

padding и border-spacing
padding — это расстояние между содержимым ячейки и ее границей (желтый цвет)
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
border-spacing — это расстояние между ячейками (зеленый цвет)
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding и border-spacing</title> <style> table, td { border: 1px solid black; } table { border-spacing: 15px; background-color:green; } td { background-color:yellow; padding: 15px; } </style> </head>
  <body>   <table>   <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>   </table>   </body>
</html>
Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает.

Ширина таблицы

Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:

table {width: 100%;}

Пример: Применение свойства

width
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>width: 100%</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 15px; } </style> </head>
  <body>   <table>   <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>   </table>   </body>
</html>

Объединение ячеек (colspan и rowspan)

Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки <th> или ячейки <td> объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.

Объединение столбцов

Объединение столбцов достигается с помощью атрибута colspan в элементах <td> или <th> — ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца.

Пример: Применение атрибута

colspan
Ячейка на два столбца
Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Атрибут colspan</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 5px; } </style> </head>
  <body>   <table>   <tr><th colspan="2">Ячейка на два столбца</th></tr>   <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>   </table>   </body>
</html>

Объединение строк

Строки, объединенные при помощи атрибута rowspan, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
В этом примере первая ячейка таблицы растягивается на две строки вниз:

Пример: Применение атрибута

rowspan
Ячейка на две строки Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Атрибут rowspan</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 5px; } </style> </head>
  <body>   <table>   <tr><th rowspan="2">Ячейка на две строки</th>       <td>Ячейка 1</td><td>Ячейка 2</td></tr>   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>   </table>   </body>
</html>

Заголовок таблицы

Для создания заголовка или подписи таблицы используется парный тег <caption> (от англ. caption – подпись). Элемент <caption> предназначен для организации заголовка таблицы. Располагается сразу после тега <table>, но вне описания строки или ячейки.

Пример: Применение тега

<caption>
Это заголовок таблицы
Ячейка на две строки Ячейка 1Ячейка 2
Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Элемент caption</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 5px; } </style> </head>
  <body>   <table>   <caption>Это заголовок таблицы</caption>   <tr><th rowspan="2">Ячейка на две строки</th>       <td>Ячейка 1</td><td>Ячейка 2</td></tr>   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>   </table>   </body>
</html>

Теги группирования элементов таблиц

Для группирования элементов таблиц служат теги <thead>, <tbody> и <tfoot>. Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз дания верхней шапки таблицы) используется тег <thead>. Заголовки таблицы должны быть помещены в элемент <thead>, например:

<thead>
<tr><th>Заголовок 1</th><th>Заголовок 2< /th></tr>
</thead>

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

Пример: Теги

<thead>, <tbody> и <tfoot>
Это шапка таблицы
Это подвал таблицы
Ячейка 1Ячейка 2Ячейка 3Ячейка 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Теги thead, tbody и tfoot</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 5px; } </style> </head>
  <body> <table> <thead> <tr><th colspan="4">Это шапка таблицы</th></tr> </thead> <tfoot> <tr><td colspan="4">Это подвал таблицы</td></tr> </tfoot> <tbody> <tr><td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td><td>Ячейка 4</td></tr> </tbody> </table>   </body>
</html>

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


Задачи
  • Объединение столбцов

    Напиште разметку для таблицы, изображенной на рис.1.

    Задача HTML: Реши сам »

    Ячейка на два столбца
    Ячейка 1 Ячейка 2

    Рис.1

  • Объединение строк

    Напиште разметку для таблицы, изображенной на рис.1.

    Задача HTML: Реши сам »

    Ячейка на три строки Ячейка 1
    Ячейка 2
    Ячейка 3

    Рис.1

  • Убрать двойную рамку таблицы

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

    Задача HTML: Реши сам »
    Заголовок 1Заголовок 2Заголовок 3
    Ячейка 1x1 Ячейка 1x2 Ячейка 1x3
    Ячейка 2x1 Ячейка 2x2 Ячейка 2x3
    <!DOCTYPE html> <html>
    <head>
    <meta charset="UTF-8">
    <title>Рамка вокруг таблицы</title> <style> table, th, td {border: 1px solid black;} </style> </head>
      <body>   <table>   <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>   <tr><td>Ячейка 1x1 </td><td>Ячейка 1x2 </td><td>Ячейка 1x3 </td></tr>   <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>   </table>   </body>
    </html>
  • Широкая таблица

    Сделайте чтобы эта таблица отображалось полностью на всю ширину окна браузера вне зависимости от ее ширины.

    Задача HTML: Реши сам »
    Заголовок 1Заголовок 2Заголовок 3
    Ячейка 1x1 Ячейка 1x2 Ячейка 1x3
    Ячейка 2x1 Ячейка 2x2 Ячейка 2x3
    <!DOCTYPE html> <html>
    <head>
    <meta charset="UTF-8">
    <title>Ширина таблицы</title> <style> table {border-collapse: collapse;} th, td {border: 1px solid black;} </style> </head>
      <body>   <table>   <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>   <tr><td>Ячейка 1x1 </td><td>Ячейка 1x2 </td><td>Ячейка 1x3 </td></tr>   <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>   </table>   </body>
    </html>
  • Заголовок таблицы

    Измените приведенный код так, чтобы над таблицей появился основной заголовок (подпись), как показано на рис.1.

    Задача HTML: Реши сам »
    Основной заголовок таблицы
    Заголовок 1Заголовок 2Заголовок 3
    Ячейка 1x1 Ячейка 1x2 Ячейка 1x3
    Ячейка 2x1 Ячейка 2x2 Ячейка 2x3

    Рис.1

    <!DOCTYPE html> <html>
    <head>
    <meta charset="UTF-8">
    <title>Ширина таблицы</title> <style> table {border-collapse: collapse;width:100%} th, td {border: 1px solid black;} </style> </head>
      <body>   <table>   <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>   <tr><td>Ячейка 1x1 </td><td>Ячейка 1x2 </td><td>Ячейка 1x3 </td></tr>   <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>   </table>   </body>
    </html>
  • Поле внутри ячеек

    Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.

    Задача HTML: Реши сам »
    Ячейка 1Ячейка 2
    Ячейка 3Ячейка 4

    Рис.1

    <!DOCTYPE html> <html>
    <head>
    <meta charset="UTF-8">
    <title>Интервал между ячейками</title> <style> table, td { border: 1px solid black; } </style> </head>
      <body>   <table>   <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>   </table>   </body>
    </html>
  • Объединение строк

    Попробуйте написать разметку для таблицы, изображенной на рис.1. Совет: Строки всегда объединяются сверху вниз, поэтому ячейка с «ананасами» является частью первой строки.

    фурма ананасы персики
    бананы груши
    авокадо

    Рис.1

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>Объединение строк</title>
      <style>
        table {
          border-collapse: collapse;
          width: 100%;
        }
        th, td {
          border: 1px solid black;
          padding: 5px;
        } 
      </style>   
     </head>
     <body>
      <table>
        <tr>
          <td>фурма</td>
          <td rowspan="3">ананасы</td>
          <td>персики</td>
        </tr>
        <tr>
          <td>бананы</td>
          <td rowspan="2">груши</td>
        </tr>
        <tr>
          <td>авокадо</td>
        </tr>
      </table>
     </body>
    </html>





Таблицы HTML уроки для начинающих академия


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

Компании Контакты Страны
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

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

Таблица HTML определяется тегом <table>.

Каждая строка таблицы определяется тегом <tr>. Заголовок таблицы определяется с помощью тега <th>. По умолчанию заголовки таблиц являются полужирными и центрированными. Табличные данные/ячейки определяются с помощью <td> тега.

Пример

<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-элементов; текст, изображения, списки, другие таблицы, etc.



Таблица HTML-Добавление границы

Если граница для таблицы не указана, она будет отображаться без границ.

Граница задается с помощью свойства CSS border:

Пример

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

Не забывайте определять границы как для таблицы, так и для ячеек таблицы.


Таблица HTML-свернутые границы

Если требуется свернуть границы в одну границу, добавьте свойство CSS border-collapse:

Пример

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


Таблица HTML-Добавление заполнения ячеек

Заполнение ячеек определяет пространство между содержимым ячейки и ее границами.

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

Чтобы задать заполнение, используйте свойство CSS padding:

Пример

th, td {
    padding: 15px;
}


Таблица HTML-заголовки по левому краю

По умолчанию заголовки таблиц являются полужирными и центрированными.

Чтобы выровнять заголовки таблицы по левому краю, используйте свойство CSS text-align:

Пример

th {
    text-align: left;
}


Таблица HTML-Добавление интервала границы

Интервал между границами определяет расстояние между ячейками.

Чтобы задать интервал границы для таблицы, используйте свойство CSS border-spacing:

Пример

table {
    border-spacing: 5px;
}

Примечание: Если таблица имеет свернутые границы, border-spacing не имеет эффекта.


Таблицы HTML-ячейки, охватывающие множество столбцов

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


Таблицы 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>


Таблица HTML-Добавление заголовка

Чтобы добавить подпись к таблице, используйте тег <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>

Примечание: Тег <caption> должен быть вставлен сразу после тега <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>

Теперь вы можете определить особый стиль для этой таблицы:

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

И добавить больше стилей:

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;
}


Справка

  • Используйте элемент HTML <table> для определения таблицы
  • Используйте элемент HTML <tr> для определения строки таблицы
  • Используйте элемент HTML <td> для определения табличных данных
  • Используйте элемент HTML <th> для определения заголовка таблицы
  • Используйте элемент HTML <caption> для определения заголовка таблицы
  • Используйте свойство CSS border для определения границы
  • Используйте свойство CSS border-collapse для свертывания границ ячеек
  • Используйте свойство CSS padding для добавления заполнения в ячейки
  • Используйте свойство CSS text-align для выравнивания текста ячейки
  • Используйте свойство CSS border-spacing для задания интервала между ячейками
  • Используйте атрибут colspan чтобы сделать ячейку span много столбцов
  • Используйте атрибут rowspan чтобы сделать ячейку, охватывающую много строк
  • Используйте атрибут id для однозначного определения одной таблицы

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

    Тег Описание
    <table> Определяет таблицу
    <th> Определяет ячейку заголовка в таблице
    <tr> Определяет строку в таблице
    <td> Определяет ячейку в таблице
    <caption> Определяет заголовок таблицы
    <colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования
    <col> Задает свойства столбца для каждого столбца в элементе <colgroup>
    <thead> Группирует содержимое заголовка в таблице
    <tbody> Группирует содержимое тела в таблице
    <tfoot> Группирует содержимое нижнего колонтитула в таблице

Таблицы в HTML — Журнал «Код» программирование без снобизма

В языке разметки HTML есть инструменты для укладывания материала в таблицы. Сейчас они используются ровно по назначению: если вам на странице нужна таблица с данными, вы ставите тег <table> и размечаете данные по смыслу. Но так было не всегда. 

На заре интернета таблицы были инструментом вёрстки страниц: с их помощью люди создавали многоколоночные сайты, сложные композиции, вложенные меню и многие другие полезные штуки. Ранний интернет (где-то до года 2005–2007-го) в буквальном смысле держался на таблицах. 

Потом в CSS появились параметры для позиционирования элементов, и началась эра вёрстки на <div>, потом придумали CSS Grid, и понеслось. Но начиналось всё именно с табличной вёрстки. 

Прочитайте нашу подборку о CSS Grid

👉 Сегодня мы вспомним былые времена и погрузимся в магию создания таблиц в HTML. Возможно, когда-то в жизни вам придётся поддерживать сайт, который верстали в 2000 году на таблицах, и вы вспомните эту статью, и скупая слеза покатится по вашей щеке. 

Как сделать таблицу в HTML

За таблицы в вёрстке отвечает такой набор тегов:

<!-- вся таблица хранится здесь -->
<table>
	<!-- первая строка таблицы -->
	<tr>
		<td>
			<!-- первая ячейка в первой строке-->
		</td>
		<td>
			<!-- вторая ячейка в первой строке-->
		</td>
	</tr>
	<!-- закончилась первая строка -->
</table>

Теперь разберём каждый тег отдельно:

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

Сделаем простую таблицу из двух строк, по 3 ячейки в каждой. В коде это выглядит громоздко, но на деле всё получится компактно:

<table>
	<!-- первая строка таблицы -->
	<tr>
		<td>
			Первая ячейка в первой строке
		</td>
		<td>
			Привет!
		</td>
		<td>
			Это журнал «Код».
		</td>
	</tr>
	<!-- закончилась первая строка -->
	<!-- вторая строка таблицы -->
	<tr>
		<td>
			Первая ячейка во второй строке
		</td>
		<td>
			Подписывайтесь,
		</td>
		<td>
			ставьте лайки.
		</td>
	</tr>
	<!-- закончилась вторая строка -->
</table>

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

Обратите внимание, что браузер нарисовал таблицу невидимой. Это не всегда так. Раньше браузеры рисовали таблицы с чётко видимыми границами, и некоторые браузеры делают так до сих пор. Чтобы таблица выглядела одинаково у всех, смотрите следующий раздел. 

Настраиваем внешний вид

Внешний вид таблицы можно настроить стилями, как у любого другого объекта на странице: 

  • сделаем синие границы;
  • толщина границ — 2 пикселя;
  • расстояние между ячейками — 10 пикселей.
<table>

В этом примере мы прописали стили «инлайном», то есть прямо внутри кода. Но также можно было вынести эти же стили CSS-файл или в таблицу стилей в начале документа. Тогда это выглядело бы так:

<style>
table{
border-spacing:10px;
border-color:blue;
border-style:solid;
}
</style>

Также можно было бы указать, что это оформление для какой-то конкретной таблицы на странице (а не для всех, как сейчас). Тогда можно было бы сказать таблице class="kakoi-to", а в стилях сказать table.kakoi-to {...} — и прописать в фигурных скобках все нужные параметры оформления. 

Ещё можно можно настроить стили у каждой ячейки отдельно. Например, в первой строке у 2 и 3 ячейки сделать жёлтый фон:

<!-- первая строка таблицы -->
<tr>
	<td>
		Первая ячейка в первой строке
	</td>
	<td>
		Привет!
	</td>
	<td>
		Это журнал «Код».
	</td>
</tr>

Или можно было бы сказать <td>, а в стилях прописать .highlighted{background-color:yellow;} — это имеет смысл делать, если у вас в таблице будет много выделенных ячеек или вы захотите потом обращаться к ним через JavaScript. 

Чтобы сделать видимые границы у всех ячеек, добавим параметр border:

<table border = 1>

Сразу стали видны расстояния между ячейками, которые мы прописывали в стилях. 

Видно, что между ячейками расстояние есть, а внутри ячеек текст как будто зажат. Чтобы дать тексту внутри ячеек подышать, используют padding: 

<style>
table td{padding:5px;}
</style>

Заголовки в таблице

За заголовок в таблице отвечает отдельный тег <th>:

<table>
	<th>
		Первый заголовок
	</th>
	<th>
		Второй
	</th>
	<th>
		И третий
	</th>
	<!-- первая строка таблицы -->
	<tr>
		<td>
			Первая ячейка в первой строке
		</td>
		<td>
			Привет!
		</td>
		<td>
			Это журнал «Код».
		</td>
	</tr>
	<!-- закончилась первая строка -->
	<!-- вторая строка таблицы -->
	<tr>
		<td>
			Первая ячейка во второй строке
		</td>
		<td>
			Подписывайтесь,
		</td>
		<td>
			ставьте лайки.
		</td>
	</tr>
	<!-- закончилась вторая строка -->
</table>

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

<thead>
	<th>
		Первый заголовок
	</th>
	<th>
		Второй
	</th>
	<th>
		И третий
	</th>
</thead>

Объединение ячеек

Если нужно, чтобы содержимое занимало сразу несколько ячеек, используют параметр colspan для горизонтальных ячеек и rowspan — для вертикальных. В качестве параметра для них просто указываем количество ячеек, которые нужно с ними объединить:

<!-- вся таблица хранится здесь -->
<table>
	<thead>
		<th>
			Первый заголовок
		</th>
		<th>
			Второй
		</th>
		<th>
			И третий
		</th>
	</thead>
	<!-- первая строка таблицы -->
	<tr>
		<td rowspan="2" >
			Объединили первые ячейки
		</td>
		<td colspan="2">
			Привет! 
		</td>
		<!-- здесь раньше была третья ячейка первой строки, но мы её убрали, чтобы объединить ячейки -->
		
	</tr>
	<!-- закончилась первая строка -->
	<!-- вторая строка таблицы -->
	<tr>
		<!-- здесь раньше была первая ячейка второй строки, но она тоже исчезла -->
		<td>
			Подписывайтесь,
		</td>
		<td>
			ставьте лайки.
		</td>
	</tr>
	<!-- закончилась вторая строка -->
</table>

Что можно размещать в ячейках

Ячейки — это контейнеры для содержимого, куда можно класть всё:

  • текст,
  • картинки,
  • видео,
  • песни,
  • другие таблицы.

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

<!-- вторая строка таблицы -->
<tr>
	<!-- здесь раньше была первая ячейка второй строки, но она тоже исчезла -->
	<td>
		Подписывайтесь,
	</td>
	<td>
		<img src="https://thecode.media/wp-content/uploads/2021/10/photo_2021-10-27_11-50-10.jpg">
	</td>
</tr>
<!-- закончилась вторая строка -->

Чтобы этого не было, можно задать общую ширину таблицы:

<table >

И после этого указать, что картинка может занимать 100% доступной ширины ячейки, а не всего экрана:

<img src="https://thecode.media/wp-content/uploads/2021/10/photo_2021-10-27_11-50-10.jpg">

Что дальше

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

Стей тюнед и всё такое. 

А если хотите научиться верстать по-современному, почитайте вот этот цикл: 

Веб-разработка — это новый чёрный

На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.

Изучить

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

Не удается найти страницу | Autodesk Knowledge Network

(* {{l10n_strings.REQUIRED_FIELD}})

{{l10n_strings.CREATE_NEW_COLLECTION}}*

{{l10n_strings.ADD_COLLECTION_DESCRIPTION}}

{{l10n_strings.COLLECTION_DESCRIPTION}} {{addToCollection.description.length}}/500 {{l10n_strings.TAGS}} {{$item}} {{l10n_strings.PRODUCTS}} {{l10n_strings.DRAG_TEXT}}  

{{l10n_strings.DRAG_TEXT_HELP}}

{{l10n_strings.LANGUAGE}} {{$select.selected.display}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR}}  

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

{{$select.selected.display}} {{l10n_strings.CREATE_AND_ADD_TO_COLLECTION_MODAL_BUTTON}} {{l10n_strings.CREATE_A_COLLECTION_ERROR}}

Создать таблицу без границ, td только с нижней границей, используя phpword & html для конвертера docx

Я так стараюсь создать таблицу без границ и дать td только нижнюю границу без радости. Я использую html для преобразования docx в сочетании с phpword. Я пробовал встроенные стили или использовал файл style.inc, но не повезло:

Style.inc

"table" => array(
// Note that applying a table style in PHPWord applies the relevant style to
// ALL the cells in the table. So, for example, the borderSize applied here
// applies to all the cells, and not just to the outer edges of the table:
"size" => 11,
"border" => 0,
"width" => "100%",
"borderSize" => 0,
"lineHeight" => 20,
)

HTML:

                $html .= '<table border="0">';
$html .= ' <tr>';
$html .= ' <td colspan="4"><h3>Header 1</h3></td>';
$html .= ' </tr>';
$html .= ' <tr>';
$html .= ' <th><b>Site Address</b></th>';
$html .= ' <th><b>No. of Units</b></th>';
$html .= ' <th><b>Value</b></th>';
$html .= ' <th><b>Size in m<sup>2</sup></b></th>';
$html .= ' </tr>';
$html .= ' <tr>';
$html .= ' <td>Sample Text</td>';
$html .= ' <td>Sample Text</td>';
$html .= ' <td>Sample Text</th>';
$html .= ' <td>Sample Text</td>';
$html .= ' </tr>';
$html .= ' <tr>';
$html .= ' <td colspan="4"><h3>Professional Contact Details:</h3></td>';
$html .= ' </tr>';
$html .= ' <tr>';
$html .= ' <th><b>Company</b></th>';
$html .= ' <th><b>Address</b></th>';
$html .= ' <th><b>Contact Person</b></th>';
$html .= ' <th><b>Contact</b></th>';
$html .= ' </tr>';
$html .= '</table>';

Как разделить таблицу в html.

По умолчанию текст заголовка таблицы располагается над ней (ALIGN=TOP) и центрируется в горизонтальном направлении.

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

Этих сведений вполне достаточно для построения элементарных таблиц. Приведем пример простейшей таблицы, состоящей из двух строк и двух столбцов, отображение которой показано на рис. 4.3.

Рис. 4.З. Пример простейшей таблицы

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

имеет единственный допустимый параметр ALIGN, принимающий значения ТОР (заголовок над таблицей) или BOTTOM (заголовок под таблицей). Параметр ALIGN может быть опущен, что соответствует значению ALIGN=TOP. В горизонтальном направлении заголовок таблицы всегда располагается по ее центру. Таблица может не иметь заголовка. В качестве заголовка таблицы в большинстве случаев используется простой текст, что регламентируется спецификацией HTML, однако в действительности между тэгами и допустимо записывать любые HTML-элементы, употребляемые в разделе . Приведем пример записи заголовка таблицы: Заголовок, располагаемый внизу тaблицы

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


Рис. 4.4. Таблица с заголовком

Браузер Microsoft Internet Explorer предоставляет дополнительные возможности для выбора расположения заголовка. Параметр ALIGN допускает значения LEFT, CENTER и RIGHT для горизонтального выравнивания наряду с описанными выше значениями. Отметим, что это один из редких случаев, когда широко распространенный параметр ALIGN может использоваться и для горизонтального выравнивания, и для вертикального. Например, запись ALIGN=RIGHT обеспечит расположение заголовка, прижатого к правой стороне и размещенного над таблицей. Если записать ALIGN=BOTTOM, то так же, как и в приведенном выше примере, заголовок будет расположен под таблицей. Однако двойное использование в одном заголовке параметра ALIGN недопустимо. Поэтому дополнительно введен специальный параметр для вертикального выравнивания — VALIGN, принимающий значения ТОР или BOTTOM. Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, описание имеет следующий вид:

Заголовок, располагаемый внизу с выравниванием влево

Таблица с данным описанием заголовка в Microsoft Internet Explorer будет отображена следующим образом (рис. 4.5). Если данный пример просматривать в Netscape, то заголовок будет размещен по умолчанию, т. е. над таблицей и посередине в горизонтальном направлении.


Рис. 4.5. Горизонтальное выравнивание заголовка таблицы браузером Microsoft Internet Explorer

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

Параметры тега

Основным тэгом, применяемым при создании таблиц, является тег

. Он может использоваться с рядом параметров, каждый из которых допустимо опускать. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в тэге
могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Браузеры NetScape иMicrosoft Internet Explorer разрешают кроме перечисленных пяти параметров использовать параметры HEIGHT и BGCOLOR. Отдельные браузеры позволяют также задавать и другие параметры. Рассмотрим назначение общеупотребительных параметров тега
.

Параметр BORDER

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

Для добавления в таблицу рамок необходимо включить в код

параметр BORDER, который может иметь численное значение.

Например,

или
.

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

Пример таблицы с рамкой толщиной 10 пикселов приведен на рис. 4.6.


Рис. 4.6. Таблица с рамкой толщиной 10 пикселов

В спецификации HTML 3.0 не было включено значение для параметра BORDER. Это сделано лишь в HTML 3.2. Так, в частности, ранние версии Microsoft Internet Explorer не разрешали задания численного значения.

Отметим, что при отсутствии параметра BORDER рамки не прорисовываются, но место под них оставляется (это относится только к Netscape). Общий размер таблицы при отсутствии параметра BORDER или его наличии не изменяется (исключением является случай задания BORDER=0). Таким образом, минимальное расстояние между двумя соседними ячейками в этих случаях будет равно удвоенной толщине рамки, т. е. двум пикселам. Расположить ячейки как можно ближе друг к другу возможно заданием BORDER=0, что означает отсутствие рамок. Некоторые браузеры могут не поддерживать задание численного значения параметра BORDER, тогда значение, равное нулю, будет проигнорировано, и таблица будет прорисована с рамками.

Приведем несколько примеров:

Все три приведенных примера браузером Netscape будут отображены по-разному. Заметим, что здесь имеет место довольно уникальный случай, когда нельзя говорить о значении по умолчанию. Третий пример, в котором параметр BORDER опущен, отличается от любого примера, где этот параметр присутствует. Для Microsoft Internet Explorer второй и третий примеры идентичны, поэтому для этого браузера значение по умолчанию параметра BORDER равно нулю .

Параметр CELLSPACING

Форма записи параметра: CELLSPACING=num, где num — численное значение параметра в пикселах, которое не может быть опущено. Величина num определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию значение принимается равным двум. Заметим, что традиционно в издательских системах смежные ячейки таблицы имеют общую границу. В HTML-таблицах по умолчанию между ними оставляется место, что хорошо видно на приведенном выше рисунке (рис. 4.6). При задании CELLSPACING=0 рамки смежных ячеек сольются и создадут впечатление единой сетки таблицы (рис. 4.7).


Рис. 4.7. Таблица со значением CELLSPACING=0

Параметр CELLPADDING

Форма записи параметра аналогична CELLSPACING. Величина num определяет размер свободного пространства (отступа) между рамкой ячейки и данными внутри ячейки. По умолчанию значение принимается равным единице. Установка параметра CELLPADDING равным нулю может привести к тому, что некоторые части текста ячейки могут касаться ее рамки, что выглядит не очень эстетично.

На рис. 4.8 показан пример таблицы со значением CELLPADDING=10.


Рис. 4.8. Таблица со значением CELLPADDING=10

Действие параметров CELLPADDING и CELLSPACING очень похоже друг на друга. Для таблицы без рамок изменение того или другого параметра приводит к одному и тому же результату. Оба параметра влияют на соответствующие отступы одновременно по горизонтали и по вертикали. К сожалению, раздельного управления горизонтальными и вертикальными отступами так, как это сделано, например, для отступов от изображений (параметры HSPACE и VSPACE тега ), не предусмотрено.

Все три параметра — BORDER, CELLPADDING и CELLSPACING действуют независимо друг от друга, если какой-нибудь из них опущен, то берется его значение, принятое по умолчанию. В частности, если опущены все перечисленные параметры, то минимальное расстояние между данными из смежных ячеек будет равно 6 пикселам (для Netscape). Это значение складывается из двух пикселов для CELLSPACING, одного пиксела для CELLPADDING и одного пиксела для рамки каждой из ячеек. Наиболее компактная таблица будет получена заданием следующего описания:

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

Параметры WIDTH и HEIGHT

При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. При отображении расчет размеров таблиц выполняется автоматически с учетом этих факторов, при этом делается попытка представить таблицу в наиболее удобном виде — расположить таблицу так, чтобы она помещалась и окне просмотра. Общая схема просмотра больших документов, как правило, сводится к линейной прокрутке содержимого документа по вертикали и чтении текста, перемежаемого различными таблицами, изображениями и т. п. Это относится как к HTML-документам, так и к обычным документам, создаваемым в любых текстовых редакторах. Большинство как текстовых редакторов (например, Microsoft Word), так и HTML-браузеров автоматически форматируют текст так (если возможно), чтобы длина строк не превосходила ширину окна просмотра. Это позволяет избежать необходимости горизонтальной прокрутки документа. Аналогичные действия предпринимаются браузерами с таблицами — по возможности форматировать их таким образом, чтобы ширина таблицы не превосходила ширины окна просмотра. Можно сделать вывод, что ширина таблиц является более важным, первостепенным параметром, расчет которого выполняется в первую очередь по сравнению с высотой.

В большинстве случаев динамическое определение размеров таблицы дает в результате эстетически соразмерное изображение с эффективным использованием реальной площади окна просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются параметры WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тега

. Форма записи: WIDTH=num или WIDTH=num%, где num — численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна. Заметим, что допустимо задавать значения, большие 100%, хотя трудно представить себе случай, где это необходимо. Пример:
.

Аналогичные параметры могут задаваться и для отдельных ячеек. Заметим, что задание конкретного значения параметра, например WIDTH=200, не означает, что таблица в любом случае будет иметь указанную ширину, а лишь определяет рекомендуемую ширину, которая будет выдержана по возможности. Поясним это на примерах. Пусть имеется таблица, которая в данных условиях по умолчанию имела бы ширину, меньшую заданной. В этом случае браузер увеличит ширину таблицы до требуемой путем пропорционального расширения всех колонок таблицы. При сужении окна просмотра ширина таблицы изменяться не будет, и, возможно, для ее просмотра потребуется горизонтальная прокрутка. Если же таблица по умолчанию имеет ширину, большую заданной, то браузер сделает попытку уменьшить ее ширину за счет, во-первых, сокращения ширины отдельных колонок, для которых заданная ширина больше необходимой, во-вторых, разбиением текста в отдельных ячейках на несколько строк с увеличением высоты таблицы. Эти действия могут не обеспечить требуемого размера таблицы, и тогда она будет иметь минимально возможную ширину. Такие же действия предпринимаются для таблиц, у которых не указаны размеры, при сужении окна просмотра.

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

Параметр ALIGN

Данный параметр тега

определяет горизонтальное расположение таблицы в области просмотра. Допустимые значения — LEFT (выравнивание влево) и RIGHT (выравнивание вправо). По умолчанию таблицы выровнены по левому краю. Заметим, что среди допустимых значений нет типичного значения для параметра выравнивания — CENTER. В некоторых источниках по языку HTML значение CENTER (по центру) приводится в качестве допустимого в данном случае. Это соответствует спецификации HTML, но на практике и Netscape Navigator, и Microsoft Internet Explorer реализуют только два значения. Дело в том, что присутствие параметра ALIGN в тэге
не только определяет месторасположение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию картинок. Обтекание таблицы текстом с двух сторон не предусматривается ни в каких случаях. Для более точного управления обтеканием следует использовать тег
с параметром CLEAR так же, как это выполняется для . Если параметр ALIGN опущен, то место справа и/или слева от таблицы всегда будет пустым независимо от ее ширины. Если таблица не требует обтекания текстом, то можно добиться ее расположения по центру окна просмотра. Для этого, например, можно все описание таблицы поместить внутри пары тегов и .

Приведем пример таблицы с обтекающим текстом, отображение которой показано на рис. 4.9.

Таблица с обтекающим ее тeкстом


    взрослого

    населения Санкт-ПетербургаН3>

  • Абрам
  • Александр
  • Алексей
  • Альберт
  • Анатолий
  • Андрей
  • Аркадий
  • Борис
  • Вадим
  • Валентин
  • Валерий
  • Василий
  • Виктор
  • Виталий
  • Владимир
  • Владислав
  • Вячеслав
  • Геннадий
  • Георгий
  • Герман
  • Григорий
  • Дмитрий
  • Евгений
  • Ефим
  • Иван
  • Игорь
  • Ил ья
  • Иосиф
  • Константин
  • Лев
  • Леонид
  • Михаил
  • Николай
  • Олег
  • Павел
  • Петр
  • Роман
  • Семен
  • Сергей
  • Станислав
  • Эдуард
  • Юрий
  • Яков

  • Указанные 43 наиболее часто встречаемых имени охватывают 92% выборки.

    Рис. 4.9. Таблица без рамок с обтекающим текстом

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

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

      Неверное решение.

      Приведем несколько иной пример для создания подобной страницы, отображение которой показано на рис. 4.10.

      Таблица без обтекающего текста

        Наиболее употребительные мужские имена


        взрослого населения Санкт-ПетербургаН3>

      • Абрам
      • Александр
      • Алексей
      • Альберт
      • Анатолий
      • Андрей
      • Аркадий
      • Борис
      • Вадим
      • Валентин
      • Валерий
      • Василий
      • Виктор
      • Виталий
      • Владимир
      • Владислав
      • Вячеслав
      • Геннадий
      • Георгий
      • Герман
      • Григорий
      • Дмитрий
      • Евгений
      • Ефим
      • Иван
      • Игорь
      • Илья
      • Иocиф
      • Константин
      • Лев
      • Леонид
      • Михаил
      • Hикoлaй
      • Олег
      • Павел
      • Петр
      • Роман
      • Семен
      • Сергей
      • Станислав
      • Эдуард
      • Юрий
      • Яков
      • Приведенные данные получены на основе анализа репрезентативной выборки, содержащей сведения о 5000 мужчин в возрасте старше 18 лет, проживающих в Санкт-Петербурге.
        Указанные 43 наиболее часто встречаемых имениохватывают 92% выборки.
        Частота встречаемости каждого из остальных имен не превосходит 0.3%

        Рис. 4.10. Таблица без рамок, содержащая три столбца

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

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

      Форматирование данных внутри таблицы

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

      , в том числе тэги, управляющие расположением текста —

      ,
      ,


      , коды заголовков — от

      css — Как полностью удалить границы из таблицы HTML

        
        

      А в css:

        таблица {граница: нет;}
        

      РЕДАКТИРОВАТЬ: Как отметил iGEL, это решение официально устарело (хотя все еще работает), поэтому, если вы начинаете с нуля, вам следует использовать решение jnpcl для коллапса границ.

      На самом деле мне пока не нравится это изменение (не так часто работаю с таблицами).Это немного усложняет некоторые задачи. Например. когда вы хотите включить две разные границы в одно и то же место (визуально), при этом одна будет ВЕРХНЕЙ для одной строки, а вторая — НИЖНЕЙ для другой строки. Они свернутся (= будет показан только один из них). Затем вам нужно изучить, как рассчитывается «приоритет» границы и какие стили границы «сильнее» (двойные или сплошные и т. Д.).

      Я сделал так:

        
        
          первая строка
        
        
          вторая строка
        
      
      
      ----------
      
      .первый {border-bottom:1px сплошной #EEE;}
      .вторая {граница-верх:1px сплошная #CCC;}
        

      Теперь при коллапсе границы это не сработает, так как всегда удаляется одна граница. Я должен сделать это каким-то другим способом (есть и другие решения). Одна из возможностей — использование CSS3 с box-shadow:

      .
        <таблица>
        
          первая строка
        
        
          вторая строка
        
      ​​
      
      <стиль>
      .tab {граница-коллапс: коллапс;}
      .вкладка .first {border-bottom:1px solid #EEE;}
      .tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
      
        

      Вы также можете использовать что-то вроде стиля границы «канавка|гребень|вставка|выступ» только с одной границей. Но для меня это не оптимально, потому что я не могу контролировать оба цвета.

      Может быть, есть какое-то простое и красивое решение для сворачивания границ, но я его еще не видел и, честно говоря, не тратил на это много времени. Может быть, кто-то здесь сможет показать мне/нам 😉

      css —

      css — удалить границу из таблицы HTML

      css — удалить границу из таблицы HTML — Qaru

      спросил

      Просмотрено 13 тысяч раз

      Я хочу удалить линии границ (горизонтальные и вертикальные) из первой строки приведенного ниже фрагмента:

        <ссылка href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
          


      <таблица> <тд colspan="4">

      Компания

      <тд colspan="4">

      Число

      <тд colspan="2">

      Клиент (номер счета-фактуры)) <тд colspan="2">

      Дата Старший Элемент Количество Сумма <тело> <тд>1 Рубашка (Д.В) <тд>5 200 2 Рубашка (Железо) <тд>5 200 <тд> <тд> <тд> <тд> Только четыреста рупий Всего: 400

      Я попробовал приведенный ниже код, но изменений не обнаружено!

      Пробовал:

        <тр>
      <тд colspan="4">
       

      Компания

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

      Создан 07 ноя.

      MKJMKJ

      12311 золотой знак11 серебряный знак1010 бронзовых знаков

      5

      Добавьте правило @media print в свою таблицу стилей и удалите границу таблицы и первой ячейки.

        корпус {
        /* для демонстрации */
        поле: 20 пикселей!важно;
      }
      
      #myHeader > tbody tr: первый тип td {
        цвет границы: #f9f9f9;
        нижняя граница: 0;
      }
      
      #myHeader tr:nth-of-type(2) td {
        верхняя граница: нет;
      }
      
      @медиа печать {
        Таблица {
          граница: 0 !важно;
        }
        #myHeader tr:первый тип td {
          граница: 0 !важно;
        }
      }  
        <ссылка href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
      <таблица>
        
          <тд colspan="4">
             

      Компания

      <тд colspan="4">

      Число

      <тд colspan="2">

      Клиент (номер счета) <тд colspan="2">

      Дата старший Элемент Количество Сумма <тд>1 Рубашка (округ Колумбия) <тд>5 200 2 Рубашка (Железо) <тд>5 200 <тд> <тд> <тд> <тд> Только четыреста рупий Всего: 400