Таблица

Оформление таблиц

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

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

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

Пример 1. Ширина таблицы в процентах

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

В данном примере для всех таблиц на странице задано выравнивание по центру.

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору table . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th , то он и будет установлен в качестве фона (пример 3).

Вид соединения	Поля допусков ширины шпоночного паза
	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	Is9
Плотное	P9

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов и (пример 4).

Интервалы размеров, мм	Допуск IT, мкм, для квалитетов
	5	6	7	8
До 3	4	6	10	14
Св. 3 до 6	5	8	12	18
Св. 6 до 10	6	9	15	22
Св. 10 до 18	8	11	18	27
Св. 18 до 30	9	13	21	33
Св. 30 до 50	11	16	25	39
Св. 50 до 80	13	19	30	46

Результат данного примера показан на рис. 2.

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .

Поля внутри ячеек

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

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

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

Границы и рамки

Пример 6. Применение свойства border-collapse при создании рамок таблицы

O	X	X
O	O	X
X	X	O

Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.

а — свойство не установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Пример 7. Линии между строк

Вид соединения	Поля допусков ширины шпоночного паза
	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	Is9
Плотное	P9

Результат данного примера показан на рис. 5.

Рис. 5. Таблица с горизонтальными линиями

Выравнивание текста в ячейках

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

Пример 8. Выравнивание содержимого ячеек по горизонтали

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

Рис. 6. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top , как показано в примере 9.

Пример 9. Выравнивание содержимого ячеек по вертикали

Вид соединения	Поля допусков ширины шпоночного паза
	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	Is9
Плотное	P9

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Рис. 7. Выравнивание текста в ячейках

См. также

Источник

Css разная ширина ячеек

Если мы помним, из предыдущих тем, то ширина таблицы измеряется в

Эти свойства наследуют столбцы! Чтобы задать ширину столбца, надо знать, как устанавливать свойства css — их всего три.

Ширина столбца в процентах

Давайте поэкспериментируем! С шириной столбца в процентах!

Создадим таблицу с тремя столбцами!

И присвоим им ширину 25% + 50% + 25% сумма должна быть равна 100%.

Как видим, наша страница заполняет полное пространство на данной странице.

Результат столбца с разной шириной, в процента:

Теперь ширину столбца сделаем в пикселях.

Общая ширина текстового поля, где вы читаете данный текст не равна 600 пикселям.

Ширина столбца в пикселях

Делим на 3 части 150px + 300px + 150px

Смотрим наши получившиеся столбцы с разной шириной:

width=»150″

width=»300″

width=»150″

Ширина столбца через стили css

Теперь ширину столбца пропишем через стили css.

Сам столбец обозначается тегом «td»:

Есть несколько вариантов, как прописать ширину столбцов.

К примеру, если вы пропишите сам столбец и к нему прикрепите ширину.

Но у этого способа есть один самый главный минус — все столбцы на странице будут иметь эту ширину и если эти стили прописаны в главном файл css? то все столбцы, на всем сайте будут иметь именно эту ширину!

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

Например — таблица с шириной через css.

Обратите внимание, что на третьем столбце ширина не прописана — вопрос — какой ширины должен быть третий столбец!?

class=»first»

class=»second»

no class

Фиксированная ширина столбца

Как сделать ширину столбца фиксированной!?

Тут. у меня есть некое смущение! смайлы Почему!?

Давайте данный пункт разделим еще на два подпункта:

1). Теория и фиксированной ширине столбца, это свойство table-layout со значением fixed :

Специально сделал отдельный пример, где вы можете, попробовать разобраться, что к чему и есть ли какая-то разница с присутствием или отсутствием данного свойства! И подпункт 2

Код страницы с фиксированной шириной столбца:

width : 50%; /* устанавливаем ширину таблицы (без неё результат будет идентичный) */

border : 1px solid; /* устанавливаем сплошную границу 1px (по умолчанию — черная) */

table-layout : auto; /* алгоритм автоматического размещения макета таблицы браузером */

table-layout : fixed; /* алгоритм фиксированного размещения макета таблицы браузером */

table < width : 50%; >table-layout: auto;

table < width : 50%; >table-layout: fixed;

table.test3

table.test4

table.test5

Наименование Цена 45 рублей

Веревка 20 рублей Мыло жидкое

Мыло жидкое 45 рублей Мыло жидкое

table.test6

Наименование Цена 45 рублей

Веревка 20 рублей Мыло жидкое

Мыло жидкое 45 рублей Мыло жидкое

У меня . в самом начале моего пути, было несколько сайтов построенных чисто на таблицах! И приверженцем таблиц я был очень долго — столько иногда не живут.

НО! НИКОГДА, даже не слышал и не нуждался в таком свойстве, как фиксированная ширина столбца — table-layout : fixed; !

Здесь, конечно, идет речь не о самом столбце, а о таблице вообще! Но тем не менее!

Но как же я делал фиксированную ширину столбца!?

Из стилей мы видим, что первые три столбца от левого края имеют фиксированную ширину! А четвертый столбец занимает все, что осталось от 100%

Фиксированная ширина столбца через :nth-child(n)

Как можно сделать фиксированную ширину без классов, которые указаны в предыдущем пункте! Эта таблица, что приведена в качестве примера, была сделана уже довольно давно и поскольку она выполняет свою работу и классы в том чисел поддерживают фиксированную ширину. то и менять ничего не нужно!
НО СЕГОДНЯ!

Естественно я так делать не буду!

Для этого есть более цивилизованные методы установки фиксированной ширины, сегодня, только что я сделал новую таблицу(без таблиц никуда! смайлы )

Мы будем обращаться к ширине столбца по порядковому номеру столбца!

Чтобы не рассусоливать! Нам нужен первый столбец, чтобы его фиксированная ширина была 30%!

Специально не убрал два класса .table.td_child в них есть своя фишка(о которой чуть ниже)!
Если мы хотим обратиться к первому столбцу td , то пишем так : td:nth-child(1)

А фишка в чем!? Что все таблицы с классом table будут иметь свободные ширины столбцов, если это не оговорено отдельно! Вот этот класс td_child и есть отдельно. Т.е. в данном случае, первый столбец всегда будет 30%

Источник

Как создать таблицу в HTML c разной шириной столбцов и высотой строк?

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

когда сначала задаю ширину первого ряда «» *тут все нормально
а ниже если я меняю параметр ширины то получаю ячейку такой же ширины (точки специально 🙂 а то без них не показывает в предосмотре)
может я не правильно использую данные параметры, не могу решить данную проблему. Каким тогда образом мне сделать таблицу подобного типа? ↑
Также использовал свойство colspan, с ним тоже не выходит

Главное правильно разбить на ячейки и объединить, тогда можно и размеры ячеек не задавать — они от общей ширины таблица сами распределятся. Подойдёт метод разбивки всей таблицы на сетку (в вашем случае 6 колоночную или 12), аналогично любому CSS фреймворку, но только вместо классов отвечающих за ширину использовать атрибут colspan, а за высоту rowspan. Пример

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

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

Меня в данном вопросе интересует реализация такой таблицы, практиковал и столкнулся с такой проблемой, вот и спрашиваю

Источник