Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 2

Notice: Use of undefined constant DOCUMENT_ROOT - assumed 'DOCUMENT_ROOT' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 5

Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 5

Notice: Use of undefined constant DOCUMENT_ROOT - assumed 'DOCUMENT_ROOT' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 11

Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 11

Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 28

Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 28

Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 28

Notice: Undefined variable: flag in /var/www/www-root/data/www/sound-talk.ru/index.php on line 28

Notice: Undefined variable: adsense7 in /var/www/www-root/data/www/sound-talk.ru/index.php on line 39

Notice: Undefined variable: adsense6 in /var/www/www-root/data/www/sound-talk.ru/index.php on line 40
Html ширина колонки в таблице. Зафиксировать ширину столбцов таблицы css

Таблицы и стили. Html ширина колонки в таблице


Зафиксировать ширину столбцов таблицы css | Кабинет Веб-мастера

Зафиксировать ширину столбцов таблицы css

Таблицы в HTML существуют очень давно. И так сложилось, что они выполняли, и наверное еще выполняют, не только функции хранения табличных данных... Часто их использовали для создания сетки сайта или вертикального выравнивания содержимого. Но время идет, технологии не стоят на месте, а активно развиваются и таблицы используют в основном только для хранения табличных данных... Это конечно правильно!

Есть у таблиц одна интересная особенность - распределять ширину колонок по своему усмотрению... Ей нипочем ни width, ни max-width, она сделает так, как ей хочется... Автоматически распределяет свободное пространство между колонками в зависимости от содержимого. Поэтому, две двухколоночные таблицы на странице могут выглядеть по-разному! В большинстве случаев это никуда не годится... Как же сделать поведение таблиц прогнозируемым и более послушным? Оказывается, можно!

Есть у таблиц замечательное css свойство: table-layout. Оно принимает 3 значения: auto | fixed | inherit. Нас интересует значение fixed. Если задать его таблице, то ширина колонок будет определяться либо с помощью тега col, либо на основе первой строки.

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

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

Для корректной работы этого значения обязательно должна быть задана ширина таблицы.

webkab.ru

Таблицы и стили | htmlbook.ru

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

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

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH, то он и будет установлен в качестве фона (пример 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 { background: maroon; /* Цвет фона таблицы */ color: white; /* Цвет текста */ } TD { background: navy; /* Цвет фона ячеек */ } </style> </head> <body> <table cellpadding="4" cellspacing="1"> <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr> </table> </body> </html>

В данном примере получим синий цвет фона у ячеек (тег <td>) и красный у заголовка (тег <th>). Это связано с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE. А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом.

То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.

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

Изменение цвета фона

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

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

Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется атрибут cellpadding тега <table>. Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding, добавляя его к селектору TD, как показано в примере 2.

Пример 2. Поля в таблицах

<!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 { background: white; /* Цвет фона таблицы */ color: white; /* Цвет текста */ } TD, TH { background: maroon; /* Цвет фона ячеек */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <table cellspacing="1"> <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr> </table> </body> </html>

В данном примере с помощью группирования селектором поля установлены одновременно для селектора TD и TH.

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

Поля в ячейках

Рис. 2. Поля в ячейках

Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега <table> игнорируется.

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

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

Использование атрибута cellspacing

Известно, что атрибут cellspacing тега <table> задает расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах. В вышеприведенном примере 2 этот эффект показан, поэтому повторять его не будем.

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

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

Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left, border-right, border-top и border-bottom, они соответственно определяют границу слева, справа, сверху и снизу.

Применяя свойство border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 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 { background: #dc0; /* Цвет фона таблицы */ border: 5px double #000; /* Рамка вокруг таблицы */ } TD, TH { padding: 5px; /* Поля вокруг текста */ border: 1px solid #fff; /* Рамка вокруг ячеек */ } </style> </head> <body> <table> <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr> </table> </body> </html>

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

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

Граница вокруг таблицы и ячеек

Рис. 3. Граница вокруг таблицы и ячеек

Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет действия атрибута cellspacing тега <table>. Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать <table cellspacing="0">, то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевое свойство border-collapse со значением collapse, которое добавляется к селектору TABLE (пример 4).

Пример 4. Создание одинарной рамки

<!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 { border-collapse: collapse; /* Убираем двойные границы между ячейками */ background: #dc0; /* Цвет фона таблицы */ border: 4px solid #000; /* Рамка вокруг таблицы */ } TD, TH { padding: 5px; /* Поля вокруг текста */ border: 2px solid green; /* Рамка вокруг ячеек */ } </style> </head> <body> <table> <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr> </table> </body> </html>

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

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

Граница вокруг таблицы

Рис. 4. Граница вокруг таблицы

При добавлении border-collapse: collapse значение атрибута cellspacing тега <table> игнорируется.

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

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

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

<!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 { border-collapse: collapse; /* Убираем двойные линии между ячейками */ width: 300px; /* Ширина таблицы */ } TH { background: #fc0; /* Цвет фона ячейки */ text-align: left; /* Выравнивание по левому краю */ } TD { background: #fff; /* Цвет фона ячеек */ text-align: center; /* Выравнивание по центру */ } TH, TD { border: 1px solid black; /* Параметры рамки */ padding: 4px; /* Поля вокруг текста */ } </style> </head> <body> <table> <tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr> <tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr> </table> </body> </html>

В данном примере содержимое тега <th> выравнивается по левому краю, а содержимое тега <td> — по центру. Результат примера показан ниже.

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

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

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

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

<!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 { border-collapse: collapse; /* Убираем двойные линии между ячейками */ width: 300px; /* Ширина таблицы */ } TH, TD { border: 1px solid black; /* Параметры рамки */ text-align: center; /* Выравнивание по центру */ padding: 4px; /* Поля вокруг текста */ } TH { background: #fc0; /* Цвет фона ячейки */ height: 40px; /* Высота ячеек */ vertical-align: bottom; /* Выравнивание по нижнему краю */ padding: 0; /* Убираем поля вокруг текста */ } </style> </head> <body> <table> <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr> </table> </body> </html>

В данном примере устанавливается высота заголовка <th> как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 6.

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

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

htmlbook.ru

table-layout | htmlbook.ru



htmlbook.ru 
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 7.0+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию Наследуется Применяется Ссылка на спецификацию
auto
Нет
К тегу <table> или к элементу, у которого значение display установлено как table или inline-table.
http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

table-layout: auto | fixed | inherit

Значения

auto Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает. fixed Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы. inherit Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table-layout</title> <style> table { table-layout: fixed; /* Фиксированная ширина ячеек */ width: 100%; /* Ширина таблицы */ } .col1 { width: 160px; } .coln { width: 60px; } </style> </head> <body> <table border="1"> <col> <col span="9"> <tr> <td>&nbsp;</td> <td>2012</td><td>2013</td><td>2014</td><td>2015</td> <td>2016</td><td>2017</td><td>2018</td><td>2019</td> <td>2020</td> </tr> <tr> <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td> <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td> <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td> <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html>

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Статьи по теме

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2018 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

Подпишитесь на материалы сайта по RSS

htmlbook.ru