Границы таблицы html
Границы таблицы html – они бывают разными! Граница может иметь различные свойства, например начертание.
Мы уже в прошлый раз касались немного темы таблиц, сегодня поговорим немного о границах таблицы…1.
Возьмем для примера совсем простую структуру таблицы 2 строки + 2 столбца.
Для того, чтобы мы смогли увидеть границы таблицы их нужно как-то обозначить!
Как обозначается граница таблицы!?
Граница таблицы обозначается атрибутом «border». У котрого должно быть свойство — толщина и цвет.
A. Если используется такая конструкция как в ниже идущей таблице — цвет указывать необязательно -по умолчанию это черный + начертание -по умолчанию линия.Если требуется изменить цвет, то следует добавить свойство цвета.
B. Если используются стили css, то в них требуется указать и толщину, и начертание — иначе без одного из этих свойств вы границу не увидите…<table border=»1″>
<tr>
<td >Привет</td>
<td>Привет</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
Результат:
Что мы здесь можем наблюдать!? Что таблица имеет двойные границы.
2.Как сделать одинарную границу у таблицы!?
Вообще — такая двойная линия границы смотрится, по-моему мнению очень некрасиво, давайте попытаемся сделать её в одну линию….
Добавляем в таблицу border-collapse:collapse;
2.a. Либо в таблицу записываем атрибуты таким образом:<table border=»1″>2.b.Либо через стили css:
table.example{
border-collapse: collapse;
}
table.example td{
border:1px solid;
}
В таблице надо прописать класс:
<table>Результат будет в двух случаях аналогичный:
| Привет | Привет |
| Текст | Текст |
Как сделать границу таблицы точками?
Для того, чтобы сделать границу таблицы точками вместо solid ставим dotted.
Код:
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
Результат:
4.Далее я не буду показывать код, наверное понятно, как это работает, мы приведем ещё несколько вариантов границ таблиц.
Сделать границу таблицы пунктирной линией.
Для того, чтобы сделать границу таблицы пунктирной линией заменяем solid на dashed
Результат:
Есть еще несколько разновидностей отображения границ таблиц, но думаю, что и такого описания будет достаточно, ну а если не достаточно, то вам поможет поиск.
5.Ну и напоследок… бывает такая ситуация, что требуется скрыть наружные границы таблицы — как это сдлеать!?
Скрыть наружную границу таблицы html
Стили:
table {
width: 500px;
border-collapse: collapse;
border: 2px solid white;
}
td {
padding: 3px;
border: 1px solid ;
text-align: left;
}
Таблица:
<table>
<tr>
<td>страна\год</td><td>2016</td><td>2017</td><td>2018</td>
</tr>
<tr>
<td>Россия</td><td>43</td><td>51</td><td>79</td>
</tr>
<tr>
<td>Сша</td><td>28</td><td>34</td><td>48</td>
</tr>
<tr>
<td>Германия</td><td>29</td><td>57</td><td>36</td>
</table>
Результат:
| страна\год | 2016 | 2017 | 2018 |
| Россия | 43 | 51 | 79 |
| Сша | 28 | 34 | 48 |
| Германия | 29 | 57 | 36 |
границы внутри таблицы html
границы внутри таблицы html — это уже будет тема отдельная — тема границ ячеек у таблицы.
P.S.Данная страница – граница таблицы – была написана довольно давно, но почему-то она была такой большой и в теме про границы было напихано столько много, что можно было запутаться!
И плюс ко всему было несколько ошибок!
В общем пришлось полностью переработать страницу – практически, что написал заново!
Не забудь ! Теги:границы таблицы html как сделать границы таблицы в html таблица html нижняя граница таблицы html задать границы таблицы html стиль границы таблицы html как скрыть границы таблицы в html html тонкие границы таблицы таблицы и границы<table> <tbody> сделать границы черныекак сделать обводку таблицы в html
dwweb.ru
Сетка таблицы | htmlbook.ru
Сетка представляет собой набор горизонтальных и вертикальных линий между ячейками таблицы, которые отделяют содержимое ячеек друг от друга. Сетка используется по умолчанию, если включить отображение границ с помощью атрибута border тега <table>. Однако такие линии отображаются по-разному в различных браузерах, поэтому применение стилей не только позволит удобно управлять видом таблиц, но и сделает их однотипными.
Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse.
Рис. 1. Вид таблицы с сеткой
При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse, как показано в примере 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 { width: 300px; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии между ячейками */ } TD, TH { padding: 3px; /* Поля вокруг содержимого таблицы */ border: 1px solid black; /* Параметры рамки */ } TH { background: #b0e0e6; /* Цвет фона */ } </style> </head> <body> <table> <tr> <th> </th><th>2004</th><th>2005</th><th>2006</th> </tr> <tr> <td>Рубины</td><td>43</td><td>51</td><td>79</td> </tr> <tr> <td>Изумруды</td><td>28</td><td>34</td><td>48</td> </tr> <tr> <td>Сапфиры</td><td>29</td><td>57</td><td>36</td> </tr> </table> </body> </html>(adsbygoogle = window.adsbygoogle || []).push({});
В данном примере также устанавливается цвет фона для ячеек заголовка (тег <th>) через свойство background.
Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).
Рис. 2. Сетка внутри таблицы
При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE.
Пример 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"> BODY { background: white; /* Цвет фона веб-страницы */ } TABLE { width: 300px; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии между ячейками */ border: 2px solid white; /* Прячем рамку вокруг таблицы */ } TD, TH { padding: 3px; /* Поля вокруг содержимого таблицы */ border: 1px solid maroon; /* Параметры рамки */ text-align: left; /* Выравнивание по левому краю */ } </style> </head> <body> <table> <tr> <th> </th><th>2004</th><th>2005</th><th>2006</th> </tr> <tr> <td>Рубины</td><td>43</td><td>51</td><td>79</td> </tr> <tr> <td>Изумруды</td><td>28</td><td>34</td><td>48</td> </tr> <tr> <td>Сапфиры</td><td>29</td><td>57</td><td>36</td> </tr> </table> </body> </html>
В данном примере толщина линий между ячейками составляет один пиксел, а белая рамка вокруг — два пиксела, т.е. на один пиксел больше. Это требуется для того, чтобы надежно скрыть внешнюю границу вокруг таблицы.
htmlbook.ru
Таблицы и границы | HTML/xHTML
Сколько бы ни хвалились производители суперплоских мониторов, всегда есть сила, действующая в обратном направлении: это программисты, которые никак не могут примирится с двумерностью экрана и на каждом шагу скандируют: «даёшь 3D!».
Псевдотрехмерность окружает нас везде: где надо и не надо. Если, к примеру, button по определению должен выпирать из монитора, то в чем провинились безобидные hr и table? Первый уже рассматривался в заметке № 12, теперь поговорим о том, как на корню убить трехмерность последнего.
Воспользуемся атрибутом cellspacing, создающим прозрачную рамку меж всех клеток таблицы. Нужно лишь окрасить ее в определенный цвет, а сделать это можно с помощью свойства bgcolor тэгов table и td:
<table bgcolor=black border=0 cellpadding=2 cellspacing=1 width=100>
<tr>
<td bgcolor=white> </td>
<td bgcolor=white> </td>
</tr>
<tr>
<td bgcolor=white> </td>
<td bgcolor=white> </td>
</tr>
</table>
Милостивый читатель спросит: а почему нельзя поместить bgcolor=white сразу в тэг tr, тем самым значительно сжав код? На что автор ответит: а потому, деточка моя, что двоечник по рендерингу NN6 окрасит всю строку белым цветом, и плакали наши вертикальные рамочки.
Тем не менее, код действительно получается громоздким, поэтому на подходе…
Идея подсмотрена в исходниках Студии Лебедева и принципиально не отличается от предыдущей: полностью включаем исходную таблицу во внешнюю, для которой и прописываем нужный bgcolor.
<table bgcolor=black border=0 cellpadding=0 cellspacing=0 width=100><tr><td>
<table bgcolor=white border=0 cellpadding=2 cellspacing=1>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td></tr></table>
Код значительно полегчал, хвала кодерам Студии Лебедева. Но и этот способ не лишен недостатков: попробуйте распечатать такую таблицу на принтере. Получилось? Фигушки, потому что Internet Explorer по умолчанию не печатает цвета и рисунки фона.
«Прежде чем распечатать эту страницу, пожалуйста, зайдите в меню Сервис, выберите пункт Свойства обозревателя, откройте вкладку Дополнительно и в разделе Печать отметьте галочку Печатать цвета и рисунки фона. Спасибо». Хватит бредить, лучше покланяемся в ножки CSS:
Действительно, что нам мешает указать каждой ячейке свойство border?
td{
border: solid black 1px
}
А то, мои дорогие, что таким образом на месте соприкасания ячеек получится рамка толщиной в два пикселя. По спецификации, эту проблему должно решать свойство border-collapse со значением collapse. В этом случае соседние границы должны «проглатывать» друг друга. Оставим это счастье нашим внукам, потому что нынче ни один браузер это свойство не поддерживает. Отсюда вытекает…
По-научному это называется разделением труда:
table.border{border-color: black;
border-style: solid;
border-width: 0 1px 1px 0
}
table.border td, table.border th{
border-color: black;
border-style: solid;
border-width: 1px 0 0 1px
}
Всё просто до безобразия. Каждая ячейка отвечает только за верхнюю и левую рамки. Осталось лишь дорисовать длинные правую и нижнюю рамки. Это возложено на свойство border самой таблицы.
Примечание Александра Шуркаева. На самом деле, CSS свойство border-collapse полностью (значения separate и collapse) поддерживается IE5+, NN6/Mozilla, Opera 4+, что вполне оправдывает его использование. Учтите только, что задавать свойство border-collapse необходимо при декларации тега table, в то время как бордер задаётся при описании ячеек:
table.border{border-collapse:collapse
}
table.border td, table.border th{
border:1px solid #CC0000
}
www.internet-technologies.ru
seodon.ru | Учебник HTML — Границы, рамки и отступы HTML-таблиц
Опубликовано: 29.09.2010 Последняя правка: 08.12.2015
Мы уже выяснили с вами, что у HTML-таблиц есть рамки, хотя по умолчанию их браузеры и не показывают. Но это еще не все, у каждой ячейки таблицы тоже есть рамка, которая называется граница ячейки. Но и это еще не все, используя специальные атрибуты тега <TABLE> можно изменять расстояния между ячейками и от ячеек до рамки таблицы, а также внутренние отступы от границ ячеек до их содержимого.
Рамка HTML-таблицы, границы ячеек, расстояния между ними и внутренние отступы.
Итак, для создания рамки HTML-таблицы и границ ее ячеек используется всего один атрибут тега <TABLE> — border. Значением атрибута являются целые неотрицательные числа (ноль по умолчанию), которые означают размер в пикселях. Но, внимание, размер изменяется только у рамки таблицы, у границ ячеек он всегда неизменен.
<table border="число">...</table>Для изменения расстояния между ячейками (их границами) и от ячеек до рамки таблицы в теге <TABLE> применяется атрибут cellspacing. Его значениями тоже могут быть только числа, отмеряющие расстояния в пикселях.
<table cellspacing="число">...</table>Чтобы установить внутренние отступы от границ ячеек до их содержимого необходимо в теге <TABLE> использовать атрибут cellpadding. И его значения это числа, означающие пиксельные размеры.
<table cellpadding="число">...</table>Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing и cellpadding, поэтому чтобы убрать расстояния вовсе — установите у атрибутов значения ноль (0).
Пример границ, рамок и отступов HTML-таблиц
<!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=Windows-1251">
<title>Границы, рамки и отступы таблиц</title>
</head>
<body>
<p>Таблица с измененными отступами и расстояниями:</p>
<table border="5" cellspacing="10" cellpadding="15">
<tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
<tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
<tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
</table>
<p>Таблица только с установленными рамкой и границами ячеек:</p>
<table border="5">
<tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
<tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
<tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
</table>
</body>
</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, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding=»10″ — браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.
Отступление от темы или как убрать отступы по краям страницы
Изначально все браузеры устанавливают небольшие отступы по краям HTML-страницы, которые часто бывают не нужны, поэтому сейчас вы научитесь их убирать. Вообще, эту информацию следовало бы поместить в начало учебника, но там бы она вряд ли вам пригодилась.
В свое время у тега <BODY> существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.
Способ первый. B теге <BODY> указать атрибут style со следующими значениями:
<body>…</body> — убирает отступы сразу со всех сторон HTML-страницы.
<body>…</body> — регулирует размер отступов для каждой стороны по часовой стрелке. Как правило используются размеры в пикселях, например: <body style=»margin:5px 3px 4px 5px»>…</body>
Второй и более удобный способ. В теге <STYLE>, с которым вы познакомились в уроке Меняем цвета ссылок, добавить еще одну строчку:
<style type="text/css">
...
body {margin:0}
</style>Или:
<style type="text/css">
...
body {margin:сверху справа снизу слева}
</style>Домашнее задание.
В этом уроке я тоже не буду все подробно описывать — только общие моменты. Для полноты картины посмотрите результат примера.
- Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
- В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй — левое и правое меню, а также основное содержимое (контент), в третьей — Footer или «подвал» страницы.
- Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
- Важно. Используйте тег <IMG> только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
- Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
- Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где — увеличить.
Посмотреть результат → Посмотреть ответ
seodon.ru
СSS Таблицы
Внешний вид таблицы HTML может быть значительно улучшена с помощью CSS:
| Компания | Контакты | Страна |
|---|---|---|
| Alfreds Futterkiste | Мария Андерс | Германия |
| Berglunds snabbköp | Кристина Берглунд | Швеция |
| Centro comercial Moctezuma | Франсиско Чанг | Мексика |
| Ernst Handel | Роланд Мендель | Австрия |
| Island Trading | Хелен Беннетт | Великобритания |
| Königlich Essen | Филипп Крамер | Германия |
| Laughing Bacchus Winecellars | Йоши Таннфмури | Канада |
| Magazzini Alimentari Riuniti | Иоанн Ровелли | Италия |
Границы таблицы
Чтобы задать границы таблицы в CSS, используйте свойство border.
Пример ниже определяет черными границами для элемнтов <table>, <th>, и <td>:
Обратите внимание, что таблица в примере выше имеет двойную границу.
Это потому, что обе таблицы и элименты <th>,
и <td> имеют отдельные границы.
Свернуть границы таблицы
Свойство border-collapse задает, будут ли границы таблиц свернуты в одну границу:
Если вы хотите установить границы только вокруг таблицы, укажите свойство border для <table>:
Ширина и высота таблицы
Ширина и высота таблицы определяются свойством width и height.
В примере ниже задается ширина таблицы 100 пиклелей, а высота 50 пиклелей:
Горизонтальное выравнивание таблицы
Свойство text-align задает горизонтальное выравнивание (слева, справа, или по центру) контента в тегах <th> или <td>.
По умолчанию содержание элемента <th> выравниваниет по центру и содержание элемента <td> выравниваниет по левому краю.
В следующем примере выравнивает текст слева в элементе <th>:
Вертикальное выравнивание таблицы
Свойство vertical-align задает вертикальное выравнивание в (верхней, нижней или по центру) контент в <th> или <td>.
По умолчанию вертикальное выравнивание содержимого в таблице, будет по центру (для обоих элементов <th> и <td>).
Следующий пример задает вертикальное выравнивание текста в нижней части для элемента <td>):
Отступы в таблице
Чтобы контролировать пространство между границей и содержимым в таблице, используйте свойство padding в элементе <th> и <td>:
Горизонтальные разделители таблицы
| Имя | Фамилия | Сбережение |
|---|---|---|
| Андрей | Щипунов | $100 |
| Сергей | Щипунов | $150 |
| Леонид | Щипунов | $300 |
Добавить свойство border-bottom в <th> и <td> для горизонтальных разделителей:
Таблица при наведении
Используйте селектор :hover в <tr> для выделения строк таблицы при наведении:
| Имя | Фамилия | Сбережение |
|---|---|---|
| Андрей | Щипунов | $100 |
| Сергей | Щипунов | $150 |
| Леонид | Щипунов | $300 |
Полосатая таблица
| Имя | Фамилия | Сбережение |
|---|---|---|
| Андрей | Щипунов | $100 |
| Сергей | Щипунов | $150 |
| Леонид | Щипунов | $300 |
Для полосатой таблицы, использовать селектор nth-child() и добавить background-color на всех четных (или нечетных) строк таблицы:
Цвет заголовка таблицы
Пример ниже указывает цвет фона и цвет текста элемента <th>:
| Имя | Фамилия | Сбережение |
|---|---|---|
| Андрей | Щипунов | $100 |
| Сергей | Щипунов | $150 |
| Леонид | Щипунов | $300 |
Отзывчивая таблица
В отзывчивой таблице будет отображаться горизонтальная полоса прокрутки, если экран слишком мал для отображения полного содержимого:
| Имя | Фамилия | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки | Очки |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Андрей | Щипунов | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Сергей | Щипунов | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Леонид | Щипунов | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Добавьте контейнер элемент <div> в overflow-x:auto внутри элемента <table>, чтобы сделать его отзывчивым:
Еще примеры
Установить шикарную таблицу
Пример демонстрирует, как создать шикарную таблицу.
Установить заголовок таблицы
Пример демонстрирует, как расположить заголовок таблицы.
Проверьте себя с помощью упражнений!
Свойства CSS таблицы
| Свойство | Описание |
|---|---|
| border | Устанавливает все свойства границы в одном объявлении |
| border-collapse | Устанавливает границы таблицы должны ли быть свернуты |
| border-spacing | Устанавливает расстояние между границами соседних ячеек |
| caption-side | Устанавливает размещение таблицы заголовка |
| empty-cells | Устанавливает следует ли отображать границы и фон пустых ячеек в таблице |
| table-layout | Устанавливает алгоритм макета компоновки для использования в таблице |
schoolsw3.com
Таблицы в CSS. Границы таблицы
Отображение границ ячеек
CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse. Оно принимает значения:
border-collapse: separate — у каждой ячейки своя граница (по умолчанию)
border-collapse: collapse — общая граница
border-collapse: inherit — значение принимается от родительского элемента
Для примера создадим таблицу и зададим рамку ячейкам всех таблиц, которые будут на странице. Сначала не будем ничего менять, чтобы посмотреть, как таблица будет выглядеть:
Стиль:
+
1 | <!DOCTYPE html> <html> <head> <title>Страница</title> <meta charset="utf-8"> <style> |
7 | td
{
border: 1px solid Red;
} |
HTML код:
14 | <table>
<tr>
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
</tr></table> |
Обратите внимание, у каждой ячейки своя граница. В разных браузерах CSS стиль таблицы может немного отличаться. В одних браузерах по умолчанию между ячейками есть определённое расстояние. В других границы таблицы соприкасаются.
Теперь установим таблице свойство border-collapse.
11 | #t1
{
border-collapse: collapse;
} |
Границы ячеек объединились, теперь у каждой ячейки нет своей рамки, а одна рамка находится между ячейками.
Расстояние между ячейками
CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется свойтсво border-spacing. Значением свойства является расстояние в единицах измерения CSS. Это свойство не работает, если установлено свойство border-collapse со значением collapse.
Создадим ещё одну таблицу и установим расстояние между ячейками:
Стиль:
15 | #dis
{
border-spacing: 10px;
} |
HTML код:
31 | <table>
<tr>
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
</tr>
<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
</tr></table> |
Свойству border-spacing можно указать два значения через пробел. При этом, первое значение — это расстояние по горизонтали, а второе — по вертикали.
Укажем созданной таблице разные расстояния. 17 строка будет выглядеть так:
17 | border-spacing: 5px 15px; |
Положение заголовка таблицы
Для таблицы можно создать заголовок. Он создаётся с помощью тэга <caption>. Свойство caption-side позволяет установить положение заголовка. Оно принимает значения:
caption-side: top — над таблицей (по умолчанию)
caption-side: bottom — под таблицей
Существуют другие значения, но они поддерживаются не всеми браузерами.
Добавим второй таблице заголовок и расположим его под таблицей:
32 | <caption>Заголовок таблицы</caption> |
Отображение пустых ячеек
Для пустых ячеек можно запретить отображение фона и рамки. Если ячейка содержит пробел, перевод строки или табуляцию, то она всё равно считается пустой. Отмену отображения пустых ячеек устанавливает свойство empty-cells. Может принимать значения:
empty-cells: show — ячейки видны (по умолчанию)
empty-cells: hide — ячейки не видны
Создадим таблицу с пустой ячейкой. Кроме рамки, установим ячейкам фон. Пока не будем ничего менять, посмотрите, как будет выглядеть таблица.
Стиль:
19 | #hid td
{
background-color: #909090;
} |
HTML код:
45 | <table>
<tr>
<td>строка 1 ячейка 1</td>
<td>строка 1 ячейка 2</td>
</tr>
<tr>
<td></td>
<td>строка 2 ячейка 2</td>
</tr></table> |
Пустая ячейка видна, у неё отображаются рамка и фон.
Теперь добавим таблице свойство empty-cells.
19 | #hid
{
empty-cells: hide;
} |
Обратите внимание, пустая ячейка не отображается в таблице
basecourse.ru
Границы HTML таблиц без CSS
Windows : Internet Explorer 3.0+, Netscape 3.04+, Opera 3.50+ [ 1 ], Mozilla 0.6+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+.
Linux : Netscape 3.04+, Opera 5.0+, Mozilla 0.6+, Firefox 1.0+, Chromium, SeaMonkey 1.0+, Netsurf 3.0, Dillo [ 2 ].
DOS : Arachne [ 3 ].
Пример n.1:
| Границы HTML таблиц без CSS | ||
| cellspacing=»2″ | bgcolor=»#ff6600″ |
HTML / XHTML. Код:
Пример n.2:
| Границы HTML таблиц без CSS | ||
| cellspacing=»8″ | bgcolor=»#999999″ |
HTML / XHTML. Код:
Пример n.3 — для Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne. Работает так же в других веб браузерах:
|
HTML / XHTML. Код:
Границы HTML таблиц без CSS
Некогда, главным образом (но не только) в 1990ые существовало несколько приемов HTML, использовавшихся, что бы добиться некоторых эффектов, которые ныне делаются с помощью CSS. Обращение с границами HTML таблиц было одним из них.
В данном случае на самом деле имеет место не обращение с границами, а его имитация через использование атрибутов cellspacing и bgcolor. В настоящее время, аналогично тому, как обстоит дело с выравниванием содержимого страницы по центру с помощью тега table, этот способ полне работающий, пусть и устаревший в плане своей концепции.
Общая идея
1. Атрибут bgcolor тега table используется для того, что бы сделать фон таблицы определенного цвета.
2. Атрибут bgcolor тега tr используется, что бы сделать фон содержимого таблицы (строки и ячейки) определенного, отличного от фона таблицы, цвета.
3. Атрибут cellspacing тега table используется, что бы создать пространство в определенное число пикселов вокруг ячеек таблицы. Это пространство получает цвет, заданный атрибутом bgcolor тега table. Поскольку он отличается от фона строк и ячеек, то это создает вокруг ячеек визуальные границы цвета фона таблицы.
Упомянутые шаги создают в Arachne визуальные границы только между ячейками таблицы, а не вокруг них. И эти шаги не создают вообще никакой визуальной границы в Netscape 3.04-6.0 и Mozilla 0.6-0.92. Так что следует добавить еще одну таблицу вокруг первой.
Атрибут bgcolor тега table убирается из внутренней таблицы и прописывается во внешней. Значение атрибута cellspacing внешней таблицы устанавливается равным «0». Это создает требуемые визуальные границы и в Arachne, и в Netscape 3.04-6.0, Mozilla 0.6-0.92.
Данный метод работает не только в Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne, но так же в других веб браузерах, так что его можно использовать как универсальный способ.
Страница-пример для Internet Explorer 3.0 — внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].
Internet Explorer для Windows, старые версии ( Скачать пак, содержащий Internet Explorer версий 3.0, 4.01, 5.01, 5.5, 6.0 )
Страница-пример для Netscape 3.04-6.0 и Mozilla 0.6-0.92 — внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].
Netscape Navigator 3.04 для Windows ( Cкачать )
Netscape Communicator 4.7 для Windows ( Cкачать )
Netscape Navigator 6.01 для Windows ( Cкачать )
Mozilla 0.6 для Windows ( Cкачать )
Mozilla 0.92 для Windows ( Cкачать )
Страница-пример для Arachne — внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].
Arachne 1.70 для DOS ( Cкачать )
Arachne 1.95 для DOS ( Cкачать )
Aliosque subditos et thema
Оформление нумерованных списков
Цифры-маркеры нумерованного списка, выделенные жирным начертанием без использования дополнительных тегов HTML: List item List item List item HTML / XHTML. Code: <ol> <li>List item</li> <li>List item</li> <li>List item</li> </ol> CSS. Code: ol {counter-reset: item;} ol li {display: block;} ol li:before {content: counter(item) «. «; counter-increment: item; font-weight: bold;} В настоящий момент нет явного способа форматировать только цифры-маркеры нумерованного списка. Но вместо стандартного механизма автоматической нумерации нумерованных списков можно использовать CSS счётчик. Это позволяет оформлять конкретно маркеры. Как в примере, где числа, отмечающие начало элементов нумерованного списка выделены жирным начертанием. С помощью этого способа так же возможно вместо точки после цифры использовать другие знаки. Например, закрывающую скобку » ) «. Или управлять пробелами между цифрой, разделительным знаком и содержимым, следующим за ними в элементе нумерованного списка. [ 1 ] As well as Netscape 9.0+. [ 2 ] As well as Netscape 9.0+.
CSS выравнивание по центру : по ширине и по высоте — 1
Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором будет находиться всё содержимое веб-страницы выравнивается по центру — по ширине и по высоте : [ Открыть страницу-пример ]. HTML / XHTML. Код: <!DOCTYPE html> <html> <head> <title>CSS выравнивание по центру : по ширине и по высоте — 1</title> <link rel=»stylesheet» type=»text/css» href=»css.css» /> </head> <body> <div> <div> <div> </div> </div> </div> </body> </html> CSS. Код: html {height: 100%; margin: 0px;} body height: 100%; margin: 0px;} .all {position: relative; left: 0px; top: 0px; height: 100%; width: 100%; float: left; display: table;} .wrapper {position: relative; left: 0px; top: 0px; height: auto; width: 100%; display: table-cell; vertical-align: middle;} .pagecontent {position: relative; left: 0px; top: 0px; height: 500px; width: 800px; margin: 0 auto; background: #ff6f6f;} Контейнер .pagecontent — для всего содержимого веб-страницы. В отличии от CSS выравнивание по центру, по вертикали и по горизонтали — 2, в данном случае как единицы измерения CSS могут использоваться проценты; а не только px или em. Высота и ширина могут быть больше видимой области окна браузера, но в данном случае речь о более практическом случае — когда высота и ширина контейнера .pagecontent меньше, чем размеры видимой области окна браузера. Блок .pagecontent выравнивается в видимой области окна браузера по центру / по ширине с помощью «margin: 0 auto». .All и его CSS свойства превращают всю видимую область окна браузера в CSS-таблицу. Свойства CSS делают контейнер .wrapper ячейкой этой CSS-таблицы. Содержимое этой ячейки — контейнер .pagecontent и все, что в нем находится — выравнивается в видимой области окна браузера по центру / по высоте свойством CSS «vertical-align: middle». [ 1 ] А так же в Netscape 7.2+, Mozilla 1.5+. [ 2 ] А так же в Netscape 7.2+, Mozilla 1.5+.
www.kompx.com