создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
Как сделать таблицу в html
Приведем пример, html код:
Пример таблицы
Столбец 1
Столбец 2
Обратите внимание на ячейку
. Мы используем специальный атрибут colspan
для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
Теперь рассмотрим подробно все атрибуты тега
.
Атрибуты и свойства тега
К открывающему тегу
можно прописывать различные атрибуты.
1. Свойство align="параметр"
- задает выравнивание таблицы. Может принимать следующие значения:
В разобранном выше примере мы выравнивали таблицу по центру align="center"
.
Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы
или строкам
. Таким образом, в разных ячейках выравнивание будет разное.
В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif
. Обратите внимание на то, что в теге мы добавили style="color:white;"
. Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.
3. Свойство bgcolor="цвет"
- задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)
4. Свойство border="число"
- задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1"
, что означает толщина рамки - 1 пиксель.
5. Свойство bordercolor="цвет"
- задает цвет рамки. Если border="0"
, то рамки не будет и цвет рамки не будет иметь смысла.
6. Свойство cellpadding="число"
- отступ от рамки до содержимого ячейки в пикселях.
7. Свойство cellspacing="число"
- расстояние между ячейками в пикселях.
8. Свойство cols="число"
- число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.
9. Свойство frame="параметр"
- как отображать границы вокруг таблицы. Может принимать следующие значения:
void
- не отрисовывать границы
border
- граница вокруг таблицы
above
- граница по верхнему краю таблицы
below
- граница снизу таблицы
hsides
- добавить только горизонтальные границы (сверху и снизу таблицы)
vsides
- рисовать только вертикальные границы (слева и справа от таблицы)
Как сделать, чтобы границы ячеек в таблице не склеивались
В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse
:
...
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
Табличные данные
- информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег
, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега
и заканчивается закрывающим тегом
.
Внутри тега
располагаются ячейки таблицы, представленные тегами
или
. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.
Рамка таблицы
По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border . Но стоит обратить внимание на то, что если добавить рамку только к элементу
, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов
Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing , которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.
Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse . Оно может принимать два значения:
separate:
является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
collapse:
соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
Название документа
Имя
Фамилия
Гомер
Симпсон
Мардж
Симпсон
Имя
Фамилия
Гомер
Симпсон
Мардж
Симпсон
Попробовать »
Размер таблицы
После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding :
Th, td { padding: 7px; }
Попробовать »
Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height , задавая нужные размеры или самой таблице или ячейкам:
По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.
CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:
top:
текст выравнивается по верхней границе ячейки
middle:
выравнивает текст по центру (значение по умолчанию)
bottom:
текст выравнивается по нижней границе ячейки
Название документа
Имя
Фамилия
Гомер
Симпсон
Мардж
Симпсон
Попробовать »
Чередование фонового цвета строк таблицы
При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class , добавляя его к каждой второй строке таблицы:
Название документа
Имя
Фамилия
Положение
Гомер
Симпсон
отец
Мардж
Симпсон
мать
Барт
Симпсон
сын
Лиза
Симпсон
дочь
Попробовать »
Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс:nth-child , позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса:nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):
Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.
Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс:hover к селектору строки таблицы и задать нужный цвет фона:
Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе - за автоматическое выравнивание по центру:
Table { margin: 10px auto; }
Попробовать »
Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:
Table { margin: 10px auto 30px; }
1. Что такое HTML таблицы и зачем они нужны?
html таблицы
- это один из самых основных составляющих каждой html странички и соответственно каждого сайта. Например, сайт сайт весь состоит из таблиц: картинки, тексты, ссылки, формы регистрации – все размещено относительно друг друга при помощи таблиц html (собственно, весь сайт также расположен в одной большой таблице).
2. Какие теги у html таблиц?
Теги
, задающие таблицу html пишутся так:
Но так как мы знаем, все таблицы состоят из строк и столбцов (ячеек), поэтому необходимо задать теги и для них:
А теперь давайте попробуем объединить все теги в одну таблицу. Для этого мы создадим html таблицу, которая состоит из двух строк и трех столбцов:
Делается такая html таблица очень легко. Для начала поставим теги самой таблицы, внутрь которых помещаем необходимое количество строк (в нашем примере 2 строки):
Затем каждую строку разбиваем на ячейки с помощью тегов столбцов:
- ячейка 1.1
- ячейка 1.2
- ячейка 1.3
- ячейка 2.1
- ячейка 2.2
- ячейка 2.3
На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.).
3. Как задать фоновый цвет html таблиц?
А сейчас давайте разберемся, как же задается фон таблицы или каждой ячейки отдельно.
Итак, для задания фона используется атрибут bgcolor="цвет_фона"
.
Например, если нам необходимо задать один цвет для всей таблички, то делается это так:
bgcolor="цвет_фона"
>
- ячейка 1.1
- ячейка 1.2
- ячейка 1.3
- ячейка 2.1
- ячейка 2.2
- ячейка 2.3
Например, если необходимо сделать табличку желтого цвета, то мы пишем:
Если нужно задать фоновый цвет ряду
html таблицы, то тогда атрибут bgcolor="цвет_фона"
применяем к тегу
:
bgcolor="#FFFF00"
>
bgcolor="#0000FF"
>
1.1
1.2
1.3
2.1
2.2
2.3
1.1
1.2
1.3
2.1
2.2
2.3
В этом случае, атрибут номер ячейки
задает белый цвет тексту, расположенному внутри тега.
Точно так же задается и цвет каждой ячейки отдельно
. Например, если нужно изменить цвет ячейки 1.2 на синий, то внутри открывающего тега
атрибут bgcolor="цвет_фона"
:
4. Как установить размер ширины и высоты ячеек html таблицы?
Итак, для того, что бы вручную установить ширину и высоту ячеек, используют атрибуты height и width. Их можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
height
- атрибут, устанавливающий высоту ячейки
width
- атрибут, задающий ширину ячейки
А теперь на примере:
Теперь объясню, почему мы задали высоту ячеек только один раз в каждой строке.
Если в ряду Вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. А ширину каждого ряда лучше всего задавать отдельно!
Вы можете задать высоту и ширину для всей таблицы. В этом случае все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им данные параметры персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
Так же, очень часто приходится задавать высоту height и ширину width в процентах
:
содержимое ячейки
Если мы задаем для ячейки ширину в 40 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 60 процентов, т.е. сумма их ширин не должна превышать 60 процентов. Все очень просто: в сумме мы имеем всего 100%. Считаем: 100 – 40 = 60.
5. Как выровнять текст внутри html таблицы?
А теперь давайте разберемся, как выровнять текст в нашей html таблице по левому краю, по правому краю и по центру.
Делается это с помощью атрибута:
align=”left”
- выравнивает текст внутри html таблицы по левому краю
align=”center”
- выравнивает текст html таблицы по центру
align=”right”
- выравнивает текст внутри html таблицы по правому краю
Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом
атрибут align принимать не может.
Например, код html таблицы, текст которой выровнен по центру, выглядит так:
align="center"
>
align="left"
> 1x1
align="center"
>1.2
align="right"
> 1x3
align="left"
>2.1
align="center"
> 2x2
align="right"
>2.3
Прописав атрибут align="center"
в открытии
, мы выровняли html таблицу по центру странички браузера.
Вот такой результат Вы получите в браузере:
1x1
1.2
1x3
2.1
2x2
2.3
А теперь рассмотрим на примере, как выровнять текст внутри html таблицы по верхнему или по нижнему краю, то есть, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу.
Вертикальное выравнивание задается атрибутом:
valign="top"
- содержание будет располагаться вверху ячейки
valign="middle"
- содержание будет располагаться по центру ячейки
valign="bottom"
- содержание будет располагаться внизу ячейки
Давайте рассмотрим данные атрибуты на нашем примере:
valign="top"
> 1x1
1.2
valign="top"
> 1x3
valign="bottom"
>2.1
2x2
valign="bottom"
>2.3
Вот что мы получим, если посмотрим в браузере результат работы атрибутов align
и valign
:
1x1
1.2
1x3
2.1
2x2
2.3
6. Как объединить ячейки и столбцы html таблицы?
В этой части нашей статьи мы поговорим об атрибутах colspan
и rowspan
.
colspan
- определяет количество столбцов, на которые распространяется данная ячейка
rowspan
- определяет количество рядов на которые распространяется данная ячейка
Значения colspan
и rowspan
могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (ряда).
Итак, сейчас на примере мы растянем ячейку 1х1 на два столбца (ячейки). Для этого мы будем использовать атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть так:
Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.
С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».
А теперь, когда мы разобрались с параметром colspan
, давайте разберемся с параметром rowspan. Принцип действия тут тот же:
colspan="2"
> 1.1
1.2
2.1
2.2
1.1
1.2
2.1
2.2
Таким образом, мы научились объединять ячейки в строках и столбцах html таблиц.
7. Как убрать, добавить или изменить отступы и как задать рамку html таблице?
Итак, ранее мы создали html таблицу, между ячейками которой четко видны отступы. Чтобы их стало видно еще лучше, давайте добавим рамку для нашей таблицы. Делается это с помощью атрибутов:
border="ширина рамки в пикселях"
- устанавливает ширину рамки
bordercolor="цвет рамки"
- устанавливает цвет рамки
Давайте, например, сделаем нашей html таблице рамку черного цвета шириной 1 пиксель.
Для этого тегу
добавляем атрибуты:
Теперь мы четко видим отступы между ячейками html таблицы и отступы от внутренних краев ячеек до текста. Следовательно, без проблем можем управлять этими отступами. Для этого предназначены атрибуты:
cellspacing="ширина отступа в пикселях"
- отступ между ячейками
cellpadding="ширина отступа в пикселях"
- отступ внутри ячейки (от края ячейки до текста, изображения, ссылки...)
Например, давайте сделаем отступ между ячейками 10 пикселей, а отступ от края ячейки до текста увеличим до 20 пикселей. Делается это так:
cellpadding="20"
cellspacing="10"
>
1.1
1.2
2.1
2.2
Если посмотреть на результат в браузере, то мы четко видим, что расстояние между ячейками (cellspacing
) нашей html таблицы увеличилось до 10 пикселей, а расстояние между текстом и внутренним краем ячейки увеличилось на 20 пикселей.
1.1
1.2
2.1
2.2
Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding="0"
и cellspacing="0"
.
8. Как одну html таблицу вставить внутрь другой?
Мы подходим к завершающему этапу по изучению html таблиц. Сейчас мы научимся вставлять одну таблицу внутрь другой.
На примере, внутрь ячейки 1.2 мы вставим новую таблицу, состоящую из одного ряда и двух столбцов. Внутренней html таблице мы установим красную рамку шириной 2 пикселя и расстояние между ячейками 0 пикселей. Также, внутреннюю таблицу мы разместим вверху ячейки.
Делается это очень просто:
1.1
3.1
3.2
2.1
2.2
Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):
1.1
3.1
3.2
2.1
2.2
На этом этапе данную статью мы закончим. Думаю она получилась удачной и не сложной для понимания, и надеюсь, больше с таблицами у Вас проблем не будет.
Сегодня вы познакомитесь с еще одним очень мощным элементом создания сайтов - HTML-таблицами. А почему мощным? Видите ли, с давних пор и по сегодняшний день, чаще всего таблицы в HTML используются не по их прямому назначению - отображению табличных данных, а для создания глобального каркаса страницы. То есть создается таблица, растягивается во всю ширину страницы, а потом в ее левом столбце делают одно меню, в правом - другое, в среднем располагают основную информацию и так далее.
Кстати, если не знали, то создание сайтов, а вернее HTML-кода, называется версткой, и вы сейчас учитесь именно ей. Вообще существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. До сих пор в интернете идут ожесточенные споры о том, какая же из них лучше, но поверьте, спорят там в основном любители споров или новички, так как любой профессионал вам скажет - лучшая верстка та, которая больше подходит в конкретном случае, вот и все! А спорить о том, что лучше - танк или самолет - пустая трата времени. Но справедливости ради скажу, что по многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее. И это правильно. Но вам об этом задумываться рано, ведь, как я уже сказал, с помощью одного языка HTML можно верстать только таблицами.
Создание таблиц в HTML
Для создания простой HTML-таблицы надо использовать три типа тегов, это
,
и
. Поэтому давайте сделаем так: посмотрите на пример указанный ниже и попробуйте самостоятельно догадаться, какие теги и для чего нужны.
Пример создания таблиц в HTML
Создание HTML-таблиц
Ячейка 1.1
Ячейка 1.2
Ячейка 1.3
Ячейка 2.1
Ячейка 2.2
Ячейка 2.3
Ячейка 3.1
Ячейка 3.2
Ячейка 3.3
Результат в браузере
Ячейка 1.1
Ячейка 1.2
Ячейка 1.3
Ячейка 2.1
Ячейка 2.2
Ячейка 2.3
Ячейка 3.1
Ячейка 3.2
Ячейка 3.3
Теперь проверим ваши догадки. И опять вам говорю - не старайтесь все запоминать, не надо, главное - понять. Итак:
Тег
...
- это корневой элемент любой таблицы, между открывающим и закрывающим тегами которого находятся все остальные теги. Он является блочным
, то есть создает до и после себя переводы строк в начало. А вот содержать он не может ни блочные, ни встроенные (уровня строки) теги, а только специальные теги таблицы из которых практически всегда используется
, а остальные крайне редко. Не забыли еще, что значит «содержать»? Это значит, что в
на первом уровне вложенности запрещено указывать встроенные или блочные теги.
Тег
...
используется для создания рядов (строк) таблиц и может содержать только теги ячеек, о которых мы поговорим дальше.
Тег
...
создает ячейки таблиц и должен располагаться только внутри тега
. А вот содержать он может, внимание, и блочные, и встроенные элементы, в том числе и обычный текст. Кстати, обратите внимание, что в таблицах не существует тегов создания столбцов (колонок), потому что они формируются из элементов
.
Тег
...
. Да, его нет в нашем примере, так как это практически аналог тега
и применяется вместо него, когда необходимо сделать заголовочные ячейки. Такие ячейки отличаются от обычных только тем, что браузеры выделяют в них текст жирным шрифтом и располагают содержимое по центру.
При создании таблиц всегда обращайте внимание на то, чтобы во всех рядах было одинаковое количество ячеек. Разное количество не является в HTML ошибкой, но в таких случаях ваша табличка может просто «поехать» и все отобразиться совсем не так, как вы хотели.
HTML-таблицы по центру, слева, справа
По умолчанию браузеры располагают таблицы с левой стороны родительского элемента, в котором она находится. В большинстве случаев это вполне устраивает, особенно если таблицу растягивают во всю ширину. Но все-таки иногда хочется разместить HTML-таблицу по центру или справа.
В прошлом у тега
имелся атрибут align
, с его помощью и можно было изменять положение таблицы. Но он стал устаревшим, и сколько еще времени его будут поддерживать браузеры - неизвестно, так как на смену пришли стили (CSS). И чтобы показать вам правильный метод, я использую атрибут style
.
style=
"margin:0 auto 0 0"
>...
- Таблица располагается слева. Это значение по умолчанию.
style=
"margin:0 0 0 auto"
>...
- Расположение таблицы справа.
style=
"margin:0 auto 0 auto"
>...
- HTML-таблица по центру.
Теперь поясню. Используя эти значения, мы изменяем размер внешних полей (отступов) таблицы. Так как таблица является блочным HTML-элементом, а у блоков четыре стороны, то и параметры указываются для четырех сторон по часовой стрелке: style=
"margin:сверху справа снизу слева"
. Ну, что такое ноль, я думаю, вы понимаете, а вот «auto» говорит браузеру, чтобы он сам высчитывал с данной стороны размер пустого пространства, исходя из значений других сторон. Вот и получается, что если с трех сторон ноль, то с четвертой - все остальное пространство, а если с двух сторон «auto», то значит делим внешние поля пополам.
И самое главное - не бойтесь использовать CSS вместо чистого и, во многих ситуациях, «деревянного» и устаревшего HTML. Так как этим вы вкладываете в свое развитие, а не возвращаетесь к каменным топорам! Тем более я вам все преподношу «на блюдечке». :)
Пример расположения таблицы по центру
HTML. Таблица по центру
Ячейка 1.1
Ячейка 1.2
Ячейка 1.3
Ячейка 2.1
Ячейка 2.2
Ячейка 2.3
Ячейка 3.1
Ячейка 3.2
Ячейка 3.3
Результат в браузере
Ячейка 1.1
Ячейка 1.2
Ячейка 1.3
Ячейка 2.1
Ячейка 2.2
Ячейка 2.3
Ячейка 3.1
Ячейка 3.2
Ячейка 3.3
Изменение ширины HTML-таблиц и ячеек
По умолчанию браузеры высчитывают ширину таблицы исходя из содержимого ее ячеек, а изменить ее можно, используя знакомый вам атрибут width
, общий синтаксис такой:
width=
"число"
>...
- любое неотрицательное число указывающее ширину в пикселях.
width=
"число%"
>...
- неотрицательное число задающее ширину в процентах (%) исходя из ширины родительского контейнера, элемента в котором находится таблица.
Тем не менее, если указанная ширина будет меньше, чем необходимо для размещения всего содержимого HTML-таблицы, то браузеры ее проигнорируют и увеличат до нужной.
А вот атрибута width
для изменения ширины ячеек нет, вернее он был, но устарел, поэтому снова применим стили (CSS).
style=
"width:значение"
>...
style=
"width:значение"
>...
В качестве значений для ширины ячеек лучше тоже использовать только пиксели (px) и проценты (%). Естественно процентные размеры будут высчитываться исходя из ширины таблицы. Только не забудьте, что при указании размеров в атрибуте style
, всегда после чисел пишутся единицы измерения, в том числе и пиксели.
И тоже, если вы укажете ширину ячейки, а содержимое в нее не уместится - браузер проигнорирует вашу ширину и установит свою.
В HTML-таблицах ширина столбца всегда равна его самой широкой ячейке, что, впрочем, вполне естественно вообще для любых таблиц. Поэтому, меняя ширину одной (любой) ячейки - вы меняете ширину всего столбца.
Пример изменения ширины HTML-таблиц и ячеек
Ширина HTML-таблицы и ячеек
Ячейка 1.1
Ячейка 1.2
Ячейка 2.1
Ячейка 2.2
Результат в браузере
Ячейка 1.1
Ячейка 1.2
Ячейка 2.1
Ячейка 2.2
Как вы уже знаете, по умолчанию браузеры не отрисовывают рамки у таблиц, поэтому, чтобы вы четко увидели картину изменения ширины, я установил атрибут border
, о котором мы поговорим чуть позже.
нет атрибута для изменения высоты таблицы, браузеры ее автоматически высчитывают исходя из содержимого. А вот у стилей (CSS) такая возможность есть, поэтому их и будем использовать.
style=
"height:значение"
>...
- указывайте высоту таблицы только в пикселях (px), так как процентную запись браузеры игнорируют.
А вот для изменения высоты ячеек в HTML у тегов
и
все-таки был атрибут height
(вот и пойми этих разработчиков), но он устарел, поэтому снова стили.
style=
"height:значение"
>...
style=
"height:значение"
>...
Как и для ширины, используйте пиксели (px) или проценты (%), но здесь есть один момент. Когда вы указываете процентную запись, то конечно высота высчитывается исходя из размеров таблицы, поэтому если высота блока
не указана - браузеры проигнорируют значения для ячеек.
Ну и естественно браузеры проигнорируют ваши размеры, как для таблицы в целом, так и для ячеек, если содержимое не будет вмещаться.
В HTML-таблицах высота строки (как и ширина столбца) всегда равна высоте ее самой высокой ячейки. Поэтому, меняя высоту одной (любой) ячейки - вы меняете высоту всей строки.
Пример изменения высоты HTML-таблиц и ячеек
Ширина HTML-таблицы м ячеек
Ячейка 1.1
Ячейка 1.2
Ячейка 2.1
Ячейка 2.2
Результат в браузере
Ячейка 1.1
Ячейка 1.2
Ячейка 2.1
Ячейка 2.2
Выравнивание в HTML-таблицах
Если вы обратили внимание, то браузеры изначально определенным образом выравнивают содержимое ячеек таблиц. У обычных ячеек (
) содержимое выравнивается горизонтально по левой стороне и вертикально по центру, а у заголовочных (
) - в обоих случаях по центру.
Для изменения выравнивания содержимого HTML-таблиц имеются атрибуты align
и valign
, которые указываются в тегах
для рядов (строк) или
и
для отдельных ячеек:
Горизонтальное выравнивание:
align=
"left"
- Выравнивание по левой стороне ячейки.
align=
"center"
- По центру.
align=
"right"
- По правой стороне.
Вертикальное выравнивание:
valign=
"top"
- Выравнивание по верхней стороне ячейки.
valign=
"middle"
- По центру.
valign=
"bottom"
- По нижней стороне.
Пример выравнивания в HTML-таблицах
Выравнивание в <a href="/word/konverter-tablicy-v-html-kod-konvertirovat-html-v-word-preobrazovat-faily/">таблице HTML</a>
Ячейка 1.1
Ячейка 1.2
Ячейка 2.1
Ячейка 2.2
Результат в браузере
Ячейка 1.1
Ячейка 1.2
Ячейка 2.1
Ячейка 2.2
Фон HTML-таблиц
В старых версиях HTML у тегов таблиц был специальный атрибут bgcolor
, который изменял цвет фона всей таблицы или ее части. Но в уроке Меняем цвет текста и фона
мы с вами изучили универсальный способ изменения фона абсолютно любых HTML-элементов, поэтому им и пользуйтесь.
А вот фонового изображения у таблиц язык HTML вообще не предусматривал, поэтому в свое время производители браузеров ввели для этого атрибут - background
. Браузеры и до сих пор его понимают, но опять же, в уроке Изображения для фонов
вы уже научились правильно устанавливать изображения-фоны для любых элементов.
Домашнее задание.
Все задание я вам расписывать не буду, обрисую только некоторые моменты, просто сделайте так, как показано в результате примера. Если вы в свое время не скачали картинки для обучения, то можете скачать сейчас.
Измените фон страницы и размер шрифта.
В начале страницы создайте четыре ссылки-изображения.
Ниже сделайте таблицу из одного ряда и двух столбцов. Растяните ее ширину на всю страницу, сделайте выравнивание по верхней стороне ряда и измените фон каждой ячейки.
Сделайте ширину левой колонки 150px и поместите в нее ссылки-изображения.
Под таблицей создайте текстовые ссылки.
Сделайте так, чтобы при наведении курсора мыши на любую ссылку появлялась «всплывающая» подсказка.
Не забывайте про
Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.
Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.
Форматирование таблиц
1. Границы таблицы border
Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы
задаются свойством border:
Table {
border-collapse: collapse; /*убираем пустые промежутки между ячейками*/
border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/
}
Границы ячеек заголовка
каждого столбца задаются для элемента th:
Th {border: 1px solid grey;}
Границы ячеек
тела таблицы задаются для элемента td:
Td {border: 1px solid grey;}
Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей таблицы можно следующим способом:
Th, td {border: 1px solid grey;}
Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:
Table {border: 3px solid grey;}
Границы можно задавать частично:
/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */
table {border-top: 3px solid grey; }
/* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */
td {border-bottom: 1px solid grey;}
По умолчанию ширина и высота таблицы
определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).
Ширина таблицы и столбцов
задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.
Ширину таблицы и столбцов обычно задают в px или % , например:
Высота таблицы
не задается. Высотой рядов
таблицы можно управлять, добавив верхний и нижний padding для элементов
и
. Фиксировать высоту с помощью свойства height не рекомендуется.
Th, td {padding: 10px 15px;}
3. Как задать фон таблицы
По умолчанию фон таблицы
и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:
заливка , , .
4. Столбцы таблицы
Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега
. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:
с
помощью тега
Можно задать фон для любого количества столбцов;
с
помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);
с
помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.
Подробнее про CSS-селекторы вы сможете прочитать .
caption {
caption-side: bottom;
text-align: right;
padding: 10px 0;
font-size: 14px;
}
Рис. 2. Пример отображения заголовка под таблицей
6. Как убрать промежуток между рамками ячеек
Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется.
Синтаксис
Table {border-collapse: collapse;}
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек
7. Как увеличить промежуток между рамками ячеек
С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.
Синтаксис
Table {border-collapse: separate; border-spacing: 10px 20px;}
table {border-collapse: separate; border-spacing: 10px;}
Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек
8. Как скрыть пустые ячейки таблицы
Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется.
9. Компоновка макета таблицы с помощью свойства table-layout
Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.
Синтаксис
Table {table-layout: fixed;}
10. Лучшие макеты таблиц
1. Горизонтальный минимализм
Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .
При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td .
Td {
border-bottom: 1px solid #ccc;
color: #669;
padding: 9px 8px;
transition: .3s linear;
}/*остальной код - как в примере выше*/
Добавление эффекта:hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.
Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы.
Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя.
Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.
Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.
Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект:hover при наведении на строку.
Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.
Рис. 2. Пример отображения заголовка под таблицей
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек
Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек
Рис. 5. Пример скрытия 
