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

Объединение ячеек таблицы.

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

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

Применение этих атрибутов немного сложнее, чем применение других. Именно по этому им отведен отдельный урок.

Атрибут colspan.

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

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

Пояснения к коду:
Верхняя строка &lttr&gt имеет одну ячейку &lttd&gt, для которой прописан атрибут colspan со значением 2. Это значит, что данная ячейка объединяет в себе 2 ячейки, соответственно эта ячейка заменяет 2 ячейки. Вторая строка &lttr&gt имеет 2 обычные ячейки &lttd&gt.
Получается, что в верхней строке у нас две объединенных между собой ячейки, а в нижней строке две обычные ячейки. Количество равное, значит код написан верно.

Теперь пример кода с распространенной ошибкой:

Пояснения к коду:
Ошибка в том, что первая строка &lttr&gt содержит не две ячейки &lttd&gt, а три, в то время как вторая строка &lttr&gt содержит две ячейки &lttd&gt.
Смотря на код, визуально кажется, что количество ячеек в строках одинаковое, так как кол-во тегов &lttd&gt одинаковое. Но один из тегов &lttd&gt имеет атрибут colspan со значением 2, это значит, что эта одна ячейка занимает место двух.

Атрибут rowspan.

Атрибут rowspan используется для объединения ячеек по вертикали. Принцип действия точно такой же как и у атрибута colspan.

Пояснения к коду:
Верхняя строка &lttr&gt имеет три ячейки &lttd&gt, для одной из них прописан атрибут rowspan со значением 3. Это значит, что данная ячейка объединяет в себе 3 ячейки (которой задан атрибут + 2 нижних ячейки по вертикали). Как я уже сказал, первая строка имеет 3 ячейки, это значит, что и нижние две строки должны иметь тоже по три ячейки. Глядя на код, мы видим, что нижние две строки &lttr&gt имеют лишь по две ячейки &lttd&gt, но не стоит забывать, что первая ячейка верхней строки заняла свое место + еще место двух ячеек находящихся под ней. Это значит, что общее количество ячеек в каждой из отдельной строки равно трем.

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

Создание таблиц в HTML. Все о HTML таблицах

В HTML для создания таблиц используются теги группы table. К ним относятся:

— тег обвертка таблицы; — тег строки (ряда) таблицы; — тег обычной ячейки таблицы; — тег ячейки-заголовка таблицы; — тег колонки таблицы; — тег группы колонок таблицы; — тег верхнего колонтитула таблицы; — тег основной части таблицы; — тег нижнего колонтитула таблицы; — тег подписи таблицы.

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

Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

Простая HTML таблица

Чтобы создать простую таблицу HTML достаточно 3 тега: <table> , <tr> и <td> .

Тег <table> является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.

Далее необходимо определить строки и ячейки — структуру таблицы.

В HTML таблицах строка (ряд) <tr> является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка <td> внутри строки <tr> будет в первой колонке, второй элемент <td> — во второй колонке и так далее.

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

Пример простой таблицы HTML

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Исходный код простой таблицы HTML

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

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

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

Пример HTML таблицы с заголовком th

Volkswagen AG	Daimler AG	BMW Group
Audi	Mercedes-Benz	BMW
Skoda	Mercedes-AMG	Mini
Lamborghini	Smart	Rolls-Royce

Исходный код таблицы HTML с заголовками th

Объединение ячеек в таблице HTML

В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

Чтобы объединить ячейки по горизонтали используйте атрибут colspan , у ячейки <td> или <th> , где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan , у ячейки <td> или <th> , где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

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

Пример HTML таблицы с объединением ячеек

Nissan
Модель	Комплектация	Наличие
Nissan Qashqai	VISIA	+
	TEKNA	+
Nissan X-Trail	ACENTA	+
	CONNECTA	—

Исходный код таблицы HTML с объединенными ячейками

Колонтитулы и подпись в HTML таблицах

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

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

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

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

По необходимости к таблице можно добавить подпись. Для этого используйте тег <caption> .

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

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway

Характеристика	SUTA 09H 6R	SUTA 09HR6R	SUTA 15H 5R
Наличие	+	+	+
Мощность двигателя	0,9 (90 л.с.)	0,9 (90 л.с.)	1,5 (90 л.с.)
Топливо	бензин	бензин	дизель
Норма токсичности	Евро-6	Евро-6	Евро-5

Исходный код таблицы с колонтитулами и подписью

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов <col> и <colgroup> .

Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).

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

Теги <col> и <colgroup> похожи друг на друга, однако тег <colgroup> позволяет использование вложенных тегов <col> , таким образом можно задать стили группе колонок через <colgroup> и конкретной колонке внутри группы через элемент <col> (см. пример ниже).

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

Пример HTML таблицы с разделением на колонки

ZEN 2E2C AL A	ZEN 2E2C J5 A	INTENSE 2E3C AL A	Характеристика
1.5 (90 л.с.)	1.2 (115 л.с.)	1.5 (90 л.с.)	Мощность двигателя
дизель	бензин	дизель	Топливо
АКП6 (EDC)	АКП6 (EDC)	АКП6 (EDC)	Трансмиссия

Исходный код таблицы HTML c <col> и <colgroup>

Таблицы в макете страниц сайта

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

Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.

Таблицы в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Значение таблиц в HTML5

Сегодня в вёрстке сайтов таблицы имеют не такое большое значение, как несколько лет назад. Раньше сайты создавались с помощью так называемой табличной верстки, и таблицы были основой, скелетом сайта. Позже, с развитием HTML, а также по мере появления всё большего количества портативных устройств для выхода в интернет (планшеты, смартфоны) сайты, сверстанные с помощью таблиц, «ехали», не помещались на экране, отображались коряво, и возникла потребность в резиновой, адаптивной и отзывчивой верстке.
Поэтому сейчас таблицы используются по прямому назначению — для структурированной подачи информации, будь то меню, прайс-лист или ведомость по сдавшим летнюю сессию.

Основные теги таблицы

Таблица состоит из нескольких обязательных тегов:

• тег <table > (по англ. таблица) — это тег, который говорит браузеру, что внутри него будет таблица
• тег <tr> (от англ. table row — строка таблицы) обозначает строку
• тег <td> (от англ. table data — данные таблицы) обозначает ячейку. Именно в этот тег мы закладываем всё, из чего будет состоять таблица — текст, картинки, списки, кнопки или даже другие таблицы

Давайте посмотрим схематически, как это всё ложится в коде:

То есть, для того чтобы создать таблицу на 3 колонки и 4 строки нам нужно 4 раза прописать элемент <tr> и в каждом из них по три раза — элемент <td>. Проверим?

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

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

Оглавление таблиц

Чтобы как-то назвать таблицу, используется тег <caption> , по английски заголовок.

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

В HTML для этого есть специальный тег <th> (от англ. table header — заголовок таблицы). Он прописывается вместо <td> в первой строке. Давайте посмотрим на примере нашего мини-словарика, как это работает:

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

Иногда в таблицах нужно выделить не только первую строку, но и первый столбец. Например так:

Думаете, для этого тоже есть специальный тег? А нет �� Используется по прежнему тот же <th>, только вставляется он не вместо <td> в первой строке, а вместо первого <td> в каждой строчке, вот так:

Внимательный читатель наверняка заметил, что первая ячейка в первой колонке пустая. Если вам нужна пустая ячейка в таблице — её все равно нужно создать, просто ничего не вписывать между тегами <th></th> или <td></td>. Если этого не сделать — браузер подвинет остальные ячейки, куда сочтет нужным и содержимое таблицы поплывет. Попробуйте сами в JSFiddle убрать элемент <th></th> и увидите, что произойдет.

Объединение ячеек по вертикали

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

Атрибут rowspan объединяет ячейки у соседних рядов (т.е. по вертикали).

Пример объединенных ячеек:

Давайте сверстаем такую таблицу. Чтобы нагляднее было видно объединение ячеек, все же нарисуем ей границы. Для этого применим устаревшие атрибуты, которые задаются для тега <table>:

border — отвечает за толщину границы, значение задается по умолчанию в пикселях

cellpadding — расстояние от контента ячейки до границ. Если оно =»0″ — значит текст (или любой другой контент) вплотную прилегает к границам ячейки. В случае с текстом это не очень красиво , поэтому мы зададим его равным 4 пикселям.

cellspacing — расстояние между ячейками. Если оно =»0″ — значит границы ячеек накладываются друг на дружку. Если оно больше — значит каждая ячейка отстоит от другой на заданное расстояние и получается как-бы двойная рамка. Выглядит на любителя:

Если мы задали атрибут border, то по умолчанию cellspasing равен 2 пикселям. Поэтому если мы хотим границы, но при этом не хотим разрывов между ними — нужно указывать, что cellspasing=»0″

Здесь же вы можете видеть, как тесно тексту в ячейках — это потому, что применен cellpadding=»0″

Итак, как же работает атрибут rowspan? Прежде, чем сверстать таблицу — нарисуйте её от руки на листке бумаги или создайте в экселе, так вам будет проще разобраться во всех этих строчках и колонках.

Схематически нашу таблицу «Сравнение моделей» можно представить, как поле для игры в морской бой:

В ней есть 4 колонки и 4 строчки,

во второй колонке вторая и третья ячейки объединены — ставим кораблик.

В четвертой колонке совмещены третья и четвертая ячейка — и туда ставим кораблик.

Вот только в HTML мы пишем код не колонками, а строчками. Как же записать это в коде?

Очевидно, что первая строка без изменений — пишем <tr></tr> и в нём 4 элемента <th> .

Вторая строка: пишем <tr></tr>, и в нём 4 элемента <td> , только теперь второму из них прописываем атрибут rowspan=»2″ (это означает, что будут объединены 2 ячейки)

Третья строка: пишем <tr></tr>, и теперь у нас всего 3 элемента <td> , потому что один из них, который во второй колонке «отобрала» верхняя ячейка. Последнему элементу <td> также нужно прописать атрибут rowspan=»2″.

Четвертая строка: внутри элемента <tr> снова прописываем всего 3 элемента <td> , потому что в четвертой колонке его уже нет — он поглотился верхней ячейкой.

Еще раз посмотрим на нашу таблицу, но уже с тегами. Читать нужно, как книгу — слева направо, сверху вниз:

А теперь наконец проверим, как это работает в редакторе:

Объединение ячеек по горизонтали

Атрибут colspan объединяет ячейки у соседних колонок (т.е. по горизонтали). Принцип здесь тот же, что и с rowspan

К примеру нам нужно создать вот такую таблицу:

Давайте снова прочитаем её слева направо, сверху вниз:

• строка 1: пять <th>, причем первый оставляем незаполненным
• строка 2: один <th> и 3 <td>, вторая и третья ячейки объединены, т.е. для второго <td> прописываем colspan=»2″
• строка 3: один <th> и 2 <td>, третья, четвертая и пятая ячейки объединились, т.е. для третьего <td> пишем colspan=»3″
• строка 4: один <th> и 2 <td>. Вторая и третья, а также четвертая и пятая объединены — для каждого из двух <td> прописываем colspan=»2″

Схематично это можно отобразить так:

Теперь посмотрим на код и результат поближе:

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

Name already in use

Frontend / htmlacademy / основы html / Tables.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

Знакомство с таблицами

Простейшая таблица описывается с помощью трёх тегов:

‘table’ обозначает таблицу.

‘tr’ расшифровывается как «table row», обозначает строку таблицы.

‘td’ расшифровывается как «table data», обозначает ячейку внутри строки таблицы.

Теги ‘td’ располагаются внутри тегов ‘tr’, а те, в свою очередь, внутри ‘table’. Почти всё текстовое содержимое таблицы размещается внутри тегов ‘td’.

В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех ‘tr’ должно быть одинаковое количество ‘td’.

Задаём рамки с помощью CSS

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

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

Но с помощью атрибута border гибко управлять рамками не получается. С его помощью можно только изменять их толщину.

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

Улучшаем отображение рамок

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

Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:

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

Горизонтальные и вертикальные рамки

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

Такие эффекты легко достигаются с помощью CSS. Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:

border-top,

border-right,

border-bottom,

border-left.

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

Отступы внутри ячеек

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

Отступы внутри ячеек можно добавлять с помощью атрибута cellpadding тега ‘table’. Но лучше его не использовать, а задавать отступы с помощью CSS.

CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:

Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:

Отступы между ячейками

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

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

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

Поэтому в этом задании мы используем border-collapse: separate, которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse, то результат не изменится, ячейки будут отображаться раздельно.

Отступы между ячейками можно задать:

с помощью атрибута cellspacing тега ‘table’

или c помощью CSS-свойства border-spacing.

Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Испытание: простая, но аккуратная таблица

Обычно в таблицах выделяют названия столбцов или строк. В HTML для этого предусмотрен специальный тег ‘th’, который расшифровывается как «table header» и обозначает ячейку-заголовок. Тег ‘th’ аналогичен ‘td’, он так же должен располагаться внутри ‘tr’, для него стилями можно задавать все те же свойства.

По умолчанию текст внутри ‘th’ выделяется жирным и выравнивается по центру ячейки.

Тег ‘caption’ должен размещаться внутри тега ‘table’, причём непосредственно внутри него и первым, до остальных вложенных тегов. Вот так:

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.

По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.

По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

Начнём с объединения ячеек по горизонтали. Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов ‘th’ или ‘td’.

Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».

Объединение ячеек по вертикали немного сложнее. Оно осуществляется с помощью атрибута rowspan у тега ‘td’ или ‘th’.

Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку. При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку, которая была под «растянутой» мы избавимся от этого столбца.

Испытание: таблица посложнее

Выравнивание содержимого в ячейках

Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.

За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.

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

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

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

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

Цветами можно управлять с помощью этих свойств:

background-color — задаёт цвет фона,

color — цвет текста,

border-color — цвет рамок.

Чтобы задать цвета для ячейки в CSS, нужен такой код:

Задаём размеры таблицы

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

С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.

Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.

Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.

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

Особое значение auto включает расчёт размеров по умолчанию. Например, width: auto; или height: auto;.

Важное замечание. Проценты при задании высоты обычно не работают.

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

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

Есть два варианта добавления стилей ячейкам:

Назначать ячейкам уникальные имена классов, например, class=»cell-11″, и применять стили для этих классов.

Использовать атрибут style, внутри которого можно писать CSS-код.

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

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