Размер таблицы html

Если в процессе создания таблицы, вам необходимо зафиксировать размер ячеек в определенном размере, то с помощью третьей версии CSS это достаточно легко сделать. В интернете довольно часто предлагают методы с использованием colspan, или указанием размера ячейки прямо в её теге (пример: <td width=»123px»>). С помощью CSS все это можно сделать гораздо легче.

И так, допустим у нас есть таблица со списком исполнителей электронной музыки:

<table>  <tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>  <tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>  <tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>  </table>

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

table {  	table-layout:fixed; width:450px;  }  table td {  	overflow:hidden;  }  table td:nth-of-type(1) {  	width:200px;  }  table td:nth-of-type(2) {  	width:75px;  }  table td:nth-of-type(3) {  	width:175px;  }  

  
 

Как можно догадаться, table td:nth-of-type(1), table td:nth-of-type(2) и table td:nth-of-type(3) содержат цифры колонок, а параметр width отвечает за их ширину.

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

<table class="music">  <tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>  <tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>  <tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>  </table>

То и CSS код должен быть следующим:

table.music {  	table-layout:fixed; width:450px;  }  table.music td {  	overflow:hidden;  }  table.music td:nth-of-type(1) {  	width:200px;  }  table.music td:nth-of-type(2) {  	width:75px;  }  table.music td:nth-of-type(3) {  	width:175px;  }  

  
 

И еще одна важная деталь — если в вашей таблице используется заголовок вида <thead>, то для его ячеек <th> придется так же прописывать ширину, как и для ячеек <td>, в противном случае этот способ не будет работать. Т. е. теперь CSS будет выглядеть вот так:

table.music {  	table-layout:fixed; width:450px;  }  table.music td,  table.music th {  	overflow:hidden;  }  table.music td:nth-of-type(1),  table.music th:nth-of-type(1) {  	width:200px;  }  table.music td:nth-of-type(2),  table.music th:nth-of-type(2) {  	width:75px;  }  table.music td:nth-of-type(3),  table.music th:nth-of-type(3) {  	width:175px;  }

sysadmin.ru

Указание размеров отдельных ячеек и столбцов

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

Изменение размеров ячеек осуществляется при помощи тех же самых CSS-свойств, что и размеры таблицы, а именно: width и height.

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

1. Задать ячейкам индивидуальные имена классов. Выглядеть это будет вот так:

   class="cell-50px"

   А после этого следует применить стили для данных классов.

2. Задействовать атрибут style, внутри которого прописать необходимый CSS-код.

На практике второй вариант будет выглядеть следующим образом:

<td style="width: 30px;">  ... </td>

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

Пример:

<table>  <caption>Таблица с заданными размерами</caption>  <tr>  <th style="width:30px">1</th>  <th>2</th>  <th>3</th>  <th>4</th>  <th>5</th>  </tr>  <tr>  <th>1</th>  <th>2</th>  <th>3</th>  <th>4</th>  <th>5</th>  </tr>  <tr>  <th>1</th>  <th>2</th>  <th>3</th>  <th>4</th>  <th>5</th>  </tr> </table>

Результат в браузере:

Как изменить размер шрифта в таблице

Зачастую возникает потребность в изменении размера текста в таблице. Например, в ячейках-заголовках. Это можно сделать с помощью CSS-свойства font-size. Давайте зададим размер шрифта для элементов <th>:

th {  font-size: 30px; }  

  
 

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

webshake.ru

table {  /* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */  table-layout: fixed; } .fixed-width {  width: 100px; } .col-12 {  width: 100%; } .col-11 {  width: 91.666666667%; } .col-10 {  width: 83.333333333%; } .col-9 {  width: 75%; } .col-8 {  width: 66.666666667%; } .col-7 {  width: 58.333333333%; } .col-6 {  width: 50%; } .col-5 {  width: 41.666666667%; } .col-4 {  width: 33.333333333%; } .col-3 {  width: 25%; } .col-2 {  width: 16.666666667%; } .col-1 {  width: 8.3333333333%; }  /* Stylistic improvements from here */  .align-left {  text-align: left; } .align-right {  text-align: right; } table {  width: 100%; } table > tbody > tr > td, table > thead > tr > th {  padding: 8px;  border: 1px solid gray; }

 

 <table cellpadding="0" cellspacing="0" border="0">  <colgroup>  <col /> <!-- take up rest of the space -->  <col class="fixed-width" /> <!-- fixed width -->  <col class="col-3" /> <!-- percentage width -->  <col /> <!-- take up rest of the space -->  </colgroup>  <thead>  <tr>  <th class="align-left">Title</th>  <th class="align-right">Count</th>  <th class="align-left">Name</th>  <th class="align-left">Single</th>  </tr>  </thead>  <tbody>  <tr>  <td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>  <td class="align-right">19</td>  <td class="align-left">Lisa McArthur</td>  <td class="align-left">No</td>  </tr>  <tr>  <td class="align-left">This is a shorter title</td>  <td class="align-right">2</td>  <td class="align-left">John Oliver Nielson McAllister</td>  <td class="align-left">Yes</td>  </tr>  </tbody> </table>   <table cellpadding="0" cellspacing="0" border="0">  <!-- define everything with percentage width -->  <colgroup>  <col class="col-6" />  <col class="col-1" />  <col class="col-4" />  <col class="col-1" />  </colgroup>  <thead>  <.  

 /td>  </tr>  <tr>  <td class="align-left">This is a shorter title</td>  <td class="align-right">2</td>  <td class="align-left">John Oliver Nielson McAllister</td>  <td class="align-left">Yes</td>  </tr>  </tbody> </table>

qaru.site

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

• Содержание:
• 1. Как создать таблицу
• 2. Как создать строки (ряды) таблицы
• 3. Как сделать ячейку заголовка столбца таблицы
• 4. Как сделать ячейку тела таблицы
• 5. Как добавить подпись (заголовок) к таблице
• 6. Группирование строк и столбцов таблицы <colgroup> и <col>
• 7. Группировка разделов таблицы <thead>, <tbody> и <tfoot>
• 8. Как объединить ячейки таблицы
• 9. Атрибуты элементов таблицы
• 10. Пример создания таблицы

1. Как создать таблицу

Таблица создаётся при помощи парного тега <table></table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него. Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:

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

текст заголовка	текст заголовка
данные	данные

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

/* внешние границы таблицы серого цвета толщиной 1px */  table {border: 1px solid grey;}   /* границы ячеек первого ряда таблицы */  th {border: 1px solid grey;}  /* границы ячеек тела таблицы */  td {border: 1px solid grey;} 

Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;}.

Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:

/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */  table {width: 100%;}  /* задаст фиксированную ширину для таблицы */  table {width: 600px;}

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right, ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

2. Как создать строки (ряды) таблицы

Строки или ряды таблицы создаются с помощью тега <tr>. Количество горизонтальных строк таблицы определяется количеством парных тегов <tr></tr>.

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

Элемент <th> создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов <th></th>. Для элемента доступны атрибуты colspan, rowspan, headers.

<table>  <tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>  </table>

4. Как сделать ячейку тела таблицы

Элемент <td> создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги <td></td>, расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек <td> должно быть равно количеству пар ячеек <th>. Для элемента доступны атрибуты colspan, rowspan, headers.

<table>  <tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>  <tr><td>ячейка тела таблицы</td><td>ячейка тела таблицы</td></tr>  </table>

5. Как добавить подпись (заголовок) к таблице

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

<table>  <caption>Перечень продуктов</caption>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед.  

 м.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>   </tr>  </table>

6. Группирование строк и столбцов таблицы

Элемент <colgroup> создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов <table> и <caption>.

Элемент <col> формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т.е. не содержащие информацию одного типа. Позволяет задавать свойства столбцов для каждого столбца в пределах элемента <colgroup>. С помощью атрибута style можно изменить основной цвет фона ячеек. Для элемента <col> доступен атрибут span, задающий количество столбцов для объединения.

<table>   <colgroup>   <col span="2" style="background:Khaki"><!-- С помощью этой конструкции задаем цвет фона для первых двух столбцов таблицы-->   <col style="background-color:LightCyan"><!-- Задаем цвет фона для следующего (одного) столбца таблицы-->   </colgroup>   <tr>   <th>№ п/п</th>   <th>Наименование</th>   <th>Цена, руб.</th>   </tr>   <tr>   <td>1</td>   <td>Карандаш цветной</td>   <td>20,00</td>   </tr>   <tr>   <td>2</td>   <td>Линейка 20 см</td>   <td>30,00</td>   </tr>  </table>

7. Группировка разделов таблицы

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

Элемент должен быть использован в следующем порядке: как дочерний элемент <table>, после <caption> и <colgroup>, и перед <tbody>, <tfoot> и <tr> элементами. В пределах одной таблицы можно использовать один раз.

Элемент <tbody> группирует основное содержимое таблицы. Используется в сочетании с элементами <thead> и <tfoot>.

Элемент <tfoot> создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега <thead>, перед тегами <tbody> и <tr>.

<table>   <thead>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   </thead>  <tfoot>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>   </tr>  </tfoot>  <tbody>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>  </tbody>   </table>

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

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

<table>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td><!-- Задаем количество ячеек по горизонтали для объединения-->   </tr>  </table>

9. Атрибуты элементов таблицы

Таблица 1. Атрибуты элементов таблицы

Атрибут	Описание, принимаемое значение
colspan	Количество ячеек в строке для объединения по горизонтали. <td colspan="3"> Возможные значения: число от 1 до 999.
headers	Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров. <th id="идентификатор">...</th> <th headers="идентификатор">...</th> Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id.
rowspan	Количество ячеек в столбце для объединения по вертикали. <td rowspan="2"> Возможные значения: число от 1 до 999.
span	Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1. <col span="2"> Принимаемые значения: любое целое положительное число.

10. Пример создания таблицы

Разметка HTML

<table>   <caption>Меню ресторана "Ромашка"</caption>    <tr>   <th rowspan="2" class="first">Кухня</th>   <th colspan="2">Холодные блюда</th>   <th colspan="2">Горячие блюда</th>   <th rowspan="2">Десерты</th>   </tr>   <tr>   <td class="first">Салаты</td>   <td class="first">Закуски</td>   <td class="first">Первые блюда</td>   <td class="first">Вторые блюда</td>   </tr>   <tr>   <td rowspan="3" class="first">Русская</td>   <td>Винегрет</td>   <td>Язык с хреном</td>   <td>Щи с квашеной капустой</td>   <td>Вареники с картошкой</td>   <td>Печеные яблоки с медом</td>   </tr>   <tr>   <td>Оливье</td>   <td>Студень говяжий</td>   <td>Рассольник домашний</td>   <td>Караси запеченые в сметане</td>   <td>Блинчатый пирог</td>   </tr>   <tr>   <td>Сельдь под "шубой"</td>   <td>Судак заливной</td>   <td>Мясная солянка</td>   <td>Котлеты "Пожарские"</td>   <td>Пирожное "Картошка"</td>   </tr>   <tr>   <td rowspan="3" class="first">Испанская</td>   <td>Севиче из гребешков</td>   <td>Эмпанадас</td>   <td>Хлебный суп с чесноком</td>   <td>Паэлья с морепродуктами</td>   <td>Чуррос</td>   </tr>   <tr>   <td>Тимбал из авокадо и тунца</td>   <td>Ахотомате</td>   <td>Астурийская фабада</td>   <td>Свиное раксо</td>   <td>Альмойшавена</td>   </tr>   <tr>   <td>Фасоль с ветчиной</td>   <td>Чанфайна</td>   <td>Рыбный суп с манными клецками </td>   <td>Тортилья картофельная</td>   <td>Бунуэлос</td>   </tr>   <tr>   <td rowspan="3" class="first">Французская</td>   <td>Вогезский салат</td>   <td>Рийет из курицы</td>   <td>Баклажанный крем-суп "Ренуар"</td>   <td>Картофель огратен</td>   <td>Бриоши</td>   </tr>   <tr>   <td>Салат "Панзанелла"</td>   <td>Делисьез из сыра</td>   <td>Французский тыквенный суп</td>   <td>Гратин из птицы</td>   <td>Лигурийский лимонный пирог</td>   </tr>   <tr>   <td>Тар-тар</td>   <td>Маринованный лосось</td>   <td>Суп "Конти"</td>   <td>Тартифлетт</td>   <td>Саварен "Триумф"</td>   </tr>   </table>

Стили CSS

body {   margin: 0;   background: #F4F1F8;  }  table {   border-collapse: collapse;    line-height: 1.1;   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;   background: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);   color: #0C213B;  }  caption {   font-family: annabelle, cursive;   font-weight: bold;   font-size: 2em;   padding: 10px;    color: #F3CD26;   text-shadow: 1px 1px 0 rgba(0,0,0,.3);   }  caption:before, caption:after {   content: "274B";   color: #A9E2CC;   margin: 0 10px;  }  th {   padding: 10px;    border: 1px solid #A9E2CC;  }  td {   font-size: 0.8em;   padding: 5px 7px;   border: 1px solid #A9E2CC;  }  .first {   font-size: 1em;   font-weight: bold;   text-align: center;  }

html5book.ru

Настройка ширины столбца таблицы

Атрибут width, в настоящее время устаревший, когда-то являлся стандартным методом регулирования ширины столбцов таблицы. По умолчанию, браузер будет настраивать столбцы таблицы так, чтобы соответствовать ее содержимому. Но если нужно контролировать ширину каждого столбца, вы можете это сделать, настроив ширину для каждого элемента <td> или <th> отдельной строки. Посмотрим, как это делали раньше с помощью атрибута width, а затем как то же самое можно сделать с помощью CSS. Но вначале нам нужен эталон для сравнения:

Как видите, в первом случае мы не применили CSS или HTML td width. Что браузер сделает с такой таблицей?

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

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

Довольно неплохо. К сожалению, это некорректный HTML- код, поскольку HTML table width был признан устаревшим. Но можно сделать то же самое с помощью простого кода CSS:

Давайте посмотрим, как браузер выведет таблицу, использующую CSS вместо атрибута width:

Регулируемая высота строки таблицы

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

Как браузер выводит этот пример:

Поскольку HTML table column width устарел, мы покажем, как сделать то же самое с помощью CSS:

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

Если честно, я не могу представить, зачем нужно контролировать высоту строки с помощью HTML td width. Гораздо больше смысла в том, чтобы настроить внешний и внутренний отступ для контента элемента <td> и позволить браузеру автоматически устанавливать высоту строки, основываясь на этой информации. Вот как можно применить эту стратегию:

Этот код CSS добавляет отступы в 80 пикселей до и после, и 10 пикселей влево и вправо от каждого элемента <td>. Вот результат:

Перевод статьи «<td width>» был подготовлен дружной командой проекта Сайтостроение от А до Я.