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

2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

Пример

Пример таблицы

Столбец 1

Столбец 2

Преобразуется на странице в следующее:

В рассмотренном примере наше фоновое изображение находится в папке 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 - рисовать только вертикальные границы (слева и справа от таблицы)
• rhs - граница только на правой стороне таблицы
• lhs - граница только на левой стороне таблицы

10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах.

11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения:

• all - линия рисуется вокруг каждой ячейки таблицы
• groups - линия отображается между группами, которые образуются тегами

Атрибуты и свойства

1. Свойство align="параметр" - задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:

• left - выравнивание по левому краю
• center - выравнивание по центру
• right - выравнивание по правому краю

2. Свойство background="URL" - задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.

3. Свойство bgcolor="цвет" - задает цвет фона ячейки.

4. Свойство bordercolor="цвет" - задает цвет рамки ячейки.

5. Свойство char="буква" - задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.

6. Свойство colspan="число" - задает число объединяемых горизонтальных ячеек.

7. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах %.

8. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах %.

9. Свойство rowspan="число" - задает число объединяемых вертикальных ячеек.

10. Свойство valign="параметр" - выравнивание содержимого ячейки по вертикали.

• top - выравнивание содержимого ячейки по верхнему краю строки
• middle - выравнивание по середине
• bottom - выравнивание по нижнему краю
• baseline - выравнивание по базовой линии

Для тега

Как сделать, чтобы границы ячеек в таблице не склеивались

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

...

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.

Цель урока: Знакомство со свойствами таблицы и с принципами табличной верстки CSS

Рассмотрим основные CSS свойства таблицы

border

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

• BORDER-STYLE (СТИЛЬ ГРАНИЦЫ)
• BORDER-WIDTH (ШИРИНА ГРАНИЦЫ)
• BORDER-COLOR (ЦВЕТ ГРАНИЦЫ)

Существует также сборное правило:

table.collapse{ border-collapse:collapse; } table.separate{ border-collapse:separate; }

Результат:

width и height
(высота и ширина таблицы)

Значения:

Пример:

text-align
(выравнивание по горизонтали)

Значения:

• center (по центру)
• left (по левому краю)
• right (по правому краю)
• justify (по ширине)

vertical-align
(выравнивание по вертикали)

Значения:

• baseline (по базовой линии)
• sub (как подиндекс)
• super (как надиндекс)
• top (по верхнему краю)
• middle (посередине)
• bottom (по нижнему краю)
• % (от высоты межстрочного интервала)

Пример:

padding
(внутренние отступы в таблице)

background-color (задний фон)
color (цвет текста)

Табличная верстка CSS

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

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

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

Табличная верстка из двух колонок

Один из самых распространённых способов верстки — две колонки, т.е. страница делится на две части.

Обычно левая часть — меню и дополнительные элементы, а правая часть — основная, для главного контента.

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

В таком случае необходимо задать общую ширину всей таблицы (тега table) в процентах через свойство width (100%), а для первой ячейки (тега td) установить ширину (также свойство width) в пикселах или процентах.

Пример: задать основной каркас страницы из двух колонок: первая — с фиксированным размером, вторая — на оставшуюся область браузера. Выполнить задание используя CSS стили ()

Выполнение:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table > ...

1

2

...

Результат:

Теперь попробуем визуально отделить две колонки таблицы друг от друга.

Пример: задать разный фон ячеек (чтобы разделить две колонки друг от друга) и установить расстояние между колонками (разделитель)

Выполнение:
Добавим новые свойства стилей:

/* для левой ячейки */ td#left{ width:200px; background: #ccc; border:1px solid black; /* временно обозначим границы */ } /* для правой ячейки */ td#right{ background: #fc3; border:1px solid black; /* временно обозначим границы */ } /* для разделителя */ #razdel{ width: 10px; /* Расстояние между колонками */ }

Все вместе:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "razdel" > <td id = "right" > 2</ td > </ tr > </ table >

1

2

Для разделителя была добавлена новая ячейка.
Результат:

Разделитель между колонками можно также сделать менее выделяющимся. Для этого воспользуемся стилями границ.

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

Выполнение:
Добавим новые свойства границ для ячеек:

/* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ /* новое */ border-right: 1px dashed #000; /* Параметры правой пунктирной границы */ }

Все вместе:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table >

1

2

Результат:

Табличная верстка из трех колонок

Существует понятие фиксированного или «резинового» макета верстки.

Фиксированный макет CSS

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

Пример: создать шаблон страницы из трех колонок. Использовать фиксированный макет табличной верстки:

• левая колонка — 150 пикселей;
• средняя колонка — 400 пикселей;

Выполнение:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table >

1

2

3

Результат:

Резиновый макет

• Ширина таблицы при использовании «резинового» дизайна устанавливается в % от ширины окна браузера . Т.о. при изменении окна браузера, изменяются и размеры таблицы.
• Ширина всех ячеек может устанавливаться в процентах .
• Второй вариант, когда ширина некоторых ячеек устанавливается в процентах , а некоторых — в пикселях .

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

Пример:

• левая колонка — 20%;
• средняя колонка — 40%;
• правая колонка — 40%;

Задать фон для колонок и визуально разделить колонки границей.

Выполнение:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table >

1

2

3

Результат:

Рассмотрим второй вариант, когда ширина центральной колонки автоматически подбирается браузером; примером может служить рисунок:

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

• левая колонка — 150 пикселей;
• средняя колонка — 40%;
• правая колонка — 200 пикселей;

Задать фон для колонок и визуально разделить колонки границей.

Выполнение:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table >

1

2

3

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

Использование вложенной таблицы в резиновом макете

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

• Исходная таблица создается с двумя ячейками. Ширина таблицы задается в процентах .
• Для левой ячейки (первой колонки) устанавливается ширина в пикселях .
• Ширина правой ячейки (основа для других колонок) не указывается . Внутрь этой ячейки вставляется вторая таблица, тоже состоящая из двух ячеек.
• У ячеек вложенной таблицы ширина устанавливается в процентах .
• Ширина внутренней таблицы должна быть установлена в 100 процентов , чтобы эта таблица занимала все свободное пространство во внешней таблице.
• Ширина центральной и правой колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом.

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

• левая колонка — 150 пикселей;
• средняя колонка — 60%;
• правая колонка — 40%;

Задать фон для колонок.

Выполнение:

1 2 3 Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами. Результат: Цель урока: Знакомство со свойствами таблицы и с принципами табличной верстки CSS Рассмотрим основные CSS свойства таблицы border Свойство рассматривается в одном и включает одновременно несколько свойств: BORDER-STYLE (СТИЛЬ ГРАНИЦЫ) BORDER-WIDTH (ШИРИНА ГРАНИЦЫ) BORDER-COLOR (ЦВЕТ ГРАНИЦЫ) Существует также сборное правило: table.collapse{ border-collapse:collapse; } table.separate{ border-collapse:separate; } Результат: width и height (высота и ширина таблицы) Значения: Пример: text-align (выравнивание по горизонтали) Значения: center (по центру) left (по левому краю) right (по правому краю) justify (по ширине) vertical-align (выравнивание по вертикали) Значения: baseline (по базовой линии) sub (как подиндекс) super (как надиндекс) top (по верхнему краю) middle (посередине) bottom (по нижнему краю) % (от высоты межстрочного интервала) Пример: padding (внутренние отступы в таблице) background-color (задний фон) color (цвет текста) Табличная верстка CSS Благодаря большому числу свойств таблиц и вариациям их оформления, таблицы долгое время были некоторым станартом верстки веб-страниц. Если сделать границы таблицы невидимыми, то можно использовать ее отдельные ячейки в качестве отдельных блоков сраницы: шапка, меню, подвал и т.п. Но это не совсем правильно, ведь каждому тегу есть свое назначение, и таблицы не должны были служить для верстки страниц. Однако отсутствие альтернативы сподвигало дизайнеров именно на такой метод верстки. Сейчас есть другой способ — использование слоев, которые постепенно заменили таблицы в этом виде работы с веб-страницей. Однако и в наше время некоторые дизайнеры успешно используют табличную верстку. Табличная верстка из двух колонок Один из самых распространённых способов верстки — две колонки, т.е. страница делится на две части. Обычно левая часть — меню и дополнительные элементы, а правая часть — основная, для главного контента. В таком случае ширина левой части задается определенным значением, т.е. жестко, а правая часть занимает оставшуюся область страницы. В таком случае необходимо задать общую ширину всей таблицы (тега table) в процентах через свойство width (100%), а для первой ячейки (тега td) установить ширину (также свойство width) в пикселах или процентах. Пример: задать основной каркас страницы из двух колонок: первая — с фиксированным размером, вторая — на оставшуюся область браузера. Выполнить задание используя CSS стили () Выполнение: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table > ... 1 2 ... Результат: Теперь попробуем визуально отделить две колонки таблицы друг от друга. Пример: задать разный фон ячеек (чтобы разделить две колонки друг от друга) и установить расстояние между колонками (разделитель) Выполнение: Добавим новые свойства стилей: /* для левой ячейки */ td#left{ width:200px; background: #ccc; border:1px solid black; /* временно обозначим границы */ } /* для правой ячейки */ td#right{ background: #fc3; border:1px solid black; /* временно обозначим границы */ } /* для разделителя */ #razdel{ width: 10px; /* Расстояние между колонками */ } Все вместе: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "razdel" > <td id = "right" > 2</ td > </ tr > </ table > 1 2 Для разделителя была добавлена новая ячейка. Результат: Разделитель между колонками можно также сделать менее выделяющимся. Для этого воспользуемся стилями границ. Пример: сделать разделитель между колонками таблицы, используя пунктирную линию границы смежных ячеек Выполнение: Добавим новые свойства границ для ячеек: /* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ /* новое */ border-right: 1px dashed #000; /* Параметры правой пунктирной границы */ } Все вместе: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table > 1 2 Результат: Табличная верстка из трех колонок Существует понятие фиксированного или «резинового» макета верстки. Фиксированный макет CSS При использовании фиксированного макета ширина всей таблицы задается в пикселях , и тогда, независимо от разрешения монитора и окна браузера, таблица будет всегда иметь одинаковую ширину. В таком случае ширину остальных колонок стоит также сделать фиксированной . Можно не указать ширину одной ячейки, тогда она будет вычислена автоматически, исходя из размеров остальных ячеек и всей таблицы. Пример: создать шаблон страницы из трех колонок. Использовать фиксированный макет табличной верстки: левая колонка — 150 пикселей; средняя колонка — 400 пикселей; Выполнение: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table > 1 2 3 Результат: Резиновый макет Ширина таблицы при использовании «резинового» дизайна устанавливается в % от ширины окна браузера . Т.о. при изменении окна браузера, изменяются и размеры таблицы. Ширина всех ячеек может устанавливаться в процентах . Второй вариант, когда ширина некоторых ячеек устанавливается в процентах , а некоторых — в пикселях . Важно: Сумма ширины всех колонок должна получиться 100%, независимо от ширины таблицы. Пример: левая колонка — 20%; средняя колонка — 40%; правая колонка — 40%; Задать фон для колонок и визуально разделить колонки границей. Выполнение: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table > 1 2 3 Результат: Рассмотрим второй вариант, когда ширина центральной колонки автоматически подбирается браузером; примером может служить рисунок: Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет табличной верстки: левая колонка — 150 пикселей; средняя колонка — 40%; правая колонка — 200 пикселей; Задать фон для колонок и визуально разделить колонки границей. Выполнение: </ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table > 1 2 3 Результат: Результат будет примерно такой же, только «растягивание» будет происходит за счет центральной колонки. Использование вложенной таблицы в резиновом макете Если ширина двух колонок устанавливается в процентах, а третьей - в пикселях, обойтись одной таблицей не получится . Так, если ширина всей таблицы равна 100 процентов, первой колонки - 200 пикселей, а оставшихся колонок по 20 процентов, то простое вычисление показывает, что размер первой колонки получается равным 60 процентов. В таком случае заданное значение в пикселях браузером не воспримется, а размер будет установлен в процентах. Исходная таблица создается с двумя ячейками. Ширина таблицы задается в процентах . Для левой ячейки (первой колонки) устанавливается ширина в пикселях . Ширина правой ячейки (основа для других колонок) не указывается . Внутрь этой ячейки вставляется вторая таблица, тоже состоящая из двух ячеек. У ячеек вложенной таблицы ширина устанавливается в процентах . Ширина внутренней таблицы должна быть установлена в 100 процентов , чтобы эта таблица занимала все свободное пространство во внешней таблице. Ширина центральной и правой колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом. Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет с вложенной таблицей: левая колонка — 150 пикселей; средняя колонка — 60%; правая колонка — 40%; Задать фон для колонок. Выполнение: 1 2 3 Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами. Результат: В этой статье вы увидите, как при помощи стилей CSS отформатировать таблицы. На заре интернета дизайнера очень часто использовали таблицы для создания разметки. Сейчас практически все сайты размечаются при помощи CSS, а таблицы используют по их прямому назначению – для отображения данных. Теги для компоновки таблиц Таблицу можно сделать при помощи следующих тегов: Таблицу можно сделать при помощи следующих тегов: Определяет заголовок (скорее подпись) таблицы. Определяет один столбец в таблице. Определяет группу столбцов в таблице. Создает таблицу. Определяет одну или несколько строк в таблице. Создает одну ячейку в таблице. Определяет строки, которые отображаются внизу таблицы. Определяет заголовок для каждого столбца таблицы. Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Создает строку в таблице. Как вы видите, в таблицах можно использовать большое количество тегов, тем больше стилей CSS мы можем использовать в каждом конкретном случае. Ниже будут рассмотрены свойства CSS, применяемые для форматирования таблиц. Границы Ячейки не наследуют границы, описанные в теге table . Границы ячеек таблицы можно описать с помощью свойства border , однако в этом случае образуется промежуток. Th, td {border:2px solid black;} Этот промежуток можно удалить с помощью свойства CSS border-spacing (для IE понадобится атрибут cellspacing тега table). Однако, если вы удаляете промежуток, границы удвоятся. Table {border-spacing:0;} Чтобы избавиться от удвоенных границ и промежутков используйте свойство border-collapse со значением collapse . Table {border-collapse:collapse;} Отступы Отступы (в HTML атрибут cellpadding) определяются при помощи свойства padding . Можно применять только к ячейкам ( ) или к ячейкам под заголовки ( ) . Th, td {padding:10px 12px 13px 14px;} Выравнивание Свойство text-align Свойства text-align (в HTML атрибут align) и vertical-align выравнивают содержимое внутри ячейки таблицы. Свойство text-align (значения: left , right , center , justify) выравнивает содержимое по горизонтали. Область применения теги: , , . Th, td, table {text-align:center;} Свойство vertical-align Свойство vertical-align (значения: top , baseline , bottom , middle) выравнивает содержимое по вертикали. Область применения: th , td . Th, td {vertical-align:bottom;} Форматируем столбцы К тегам col и colgroup можно применять свойства width и свойства группы background . Это удобно, если у вас возникнет желание выделить столбец или задать ему определенную ширину. Класс и идентификаторы Чтобы форматировать конкретную ячейку или таблицу не забывайте про классы, идентификаторы и т. д. Поделиться: 5,00 / 3 Главная →Linksys →Css параметры таблицы. Поведение пустых ячеек → Статьи по теме: Беспроводная акустика JBL GO Black (JBLGOBLK) - Отзывы Внешний вид и элементы управления  Виртуальный компьютерный музей Dx связь Как шифровалась связь: технологии защиты в годы войны Вч связь по линиям электропередачи Почему возникает ошибка "Использование модальных окон в данном режиме запрещено"?