Html границы: Границы | htmlbook.ru

Как обозначается граница таблицы!?

Возьмем для примера совсем простую структуру таблицы 2 строки + 2 столбца.

Для того, чтобы мы смогли увидеть границы таблицы их нужно как-то обозначить!

Граница таблицы обозначается атрибутом «border». У котрого должно быть свойство — толщина и цвет.

Если используются стили css, то в них требуется указать и толщину, и начертание — иначе без одного из этих свойств вы границу не увидите…

    <table border=»1″>

        <tr>

            <td >Привет</td>

            <td>Привет</td>

        </tr>

        <tr>

            <td>Текст</td>

            <td>Текст</td>

        </tr>

    </table>

Результат:

Что мы здесь можем наблюдать!? Что таблица имеет двойные границы.

Видео как сделать границу таблицы

Видео сделано еще на старом оборудовании и качество не очень, если смотреть в разрешении 1920×1080, но как говорится, что есть, то есть… дл общего понимания вполне годится!

Как сделать одинарную границу у таблицы!?

Вообще — такая двойная линия границы смотрится, по-моему мнению очень некрасиво, давайте попытаемся сделать её в одну линию….

Добавляем в таблицу border-collapse:collapse;

table.example{

}

table.example td{

border:1px solid;

}

В таблице надо прописать класс:

Результат будет в двух случаях аналогичный:

Как сделать границу таблицы точками?

Для того, чтобы сделать границу таблицы точками вместо solid ставим dotted.

Код:

  <tbody>

    <tr>

      <td> </td>

    </tr>

  </tbody>

Результат:

Сделать границу таблицы пунктирной линией.

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

Для того, чтобы сделать границу таблицы пунктирной линией заменяем solid на dashed

Результат:

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

Скрыть наружную границу таблицы 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>

Результат:

Границы внутри таблицы html

С помощью какого свойства таблицы определяются её границы?

Как увидеть границы таблицы!?

Как убрать двойную границу в таблице html

1). Двойная граница таблицы с border=»1″

Здесь — пример обычной, простой таблицы с двойными границами:

<table border=»1″>

<tr>

<td>Привет</td>

<td>Привет</td>

</tr>

<tr>

<td>Текст</td>

<td>Текст</td>

</tr>

</table>

Результат:

2). Двойная граница таблицы в стилях

<table>

<tr>

<td>Привет</td>

<td>Привет</td>

</tr>

<tr>

<td>Текст</td>

<td>Текст</td>

</tr>

</table>

Еще нам понадобятся стили css, чтобы эту двойную границу сделать…

<style>

table.example_double_border {border: 1px solid;}

table.example_double_border td {border: 1px solid;}

</style>

Результат:

3). Удаляем двойные границы таблицы

Теперь у нас есть таблицы с двойными границами, и чтобы избавиться от этих двойных границ. нам нужно… добавить какой-то class, id — неважно!

<style>.no_double{border-collapse: collapse;}</style>

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

<table >

Со второй таблицей поступаем аналогично:

<table >

Результат:

Результат:

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

В общем пришлось полностью переработать страницу – практически, что написал заново!

Границы HTML таблиц без CSS

Создание визуальных границ у HTML таблиц без использования CSS и атрибута border тега table:

HTML код:

<table cellspacing="3" bgcolor="#000000">
	<tr bgcolor="#ffffff">
		<th>Header</th>
		<th>Header</th>
	</tr>
	<tr bgcolor="#ffffff">
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>

Границы HTML таблиц без CSS

Некогда, главным образом (но не только) в 1990ые существовало несколько приемов HTML, использовавшихся, чтобы добиться некоторых эффектов, которые ныне делаются с помощью CSS. Обращение с границами HTML таблиц было одним из них.

В данном случае, на самом деле, имеет место не обращение с границами, а его имитация через использование атрибутов cellspacing и bgcolor. Аналогично тому, как в настоящее время обстоит дело с HTML выравниванием по центру, этот способ вполне работающий, даже если в большинстве случаев более удобно примененять CSS.

Общая идея

1. Атрибут bgcolor тега table задает фон указанного цвета.
2. Атрибут bgcolor тега tr используется, чтобы фон содержимого таблицы (то есть, строки и ячейки) стал указанного цвета, отличающегося от фона тега table.
3. Атрибут cellspacing тега table создает пространство вокруг ячеек таблицы. Это пространство получает цвет, установленный атрибутом bgcolor тега table, а поскольку он отличается от фона строк и ячеек, это создает вокруг ячеек визуальные границы цвета фона таблицы.

Древние Netscape, Mozilla и Arachne

Создание границ HTML таблиц без CSS используется с самых ранних времен Интернета. Так что после некоторой корректировки будет работать в Netscape 3.04 — 6.0, Mozilla 0.6 — 1.7.13 и в Arachne, браузере для DOS:

HTML код:

<table cellspacing="0" cellpadding="0" border="0" bgcolor="#000000">
	<tr>
		<td>
			<table cellspacing="3" border="0">
				<tr bgcolor="#ffffff">
					<th>Header</th>
					<th>Header</th>
				</tr>
				<tr bgcolor="#ffffff">
					<td>Data</td>
					<td>Data</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Примечание: этот скорректированый HTML код роботает не только в Netscape 3.04 — 6.0, Mozilla 0.6 — 1.7.13 или Arachne, но так же и во всех браузерах и их версиях, перечисленных в секции «Поддержка в браузерах»: как современных, так и старых.

Поддержка в браузерах

Windows

Internet Explorer 3.0+

Firefox 1.0+

Google Chrome

Opera 2.12+

Safari 3.1+

SeaMonkey 1.0+

Mozilla 1.0+

Netscape 7.0+

Linux

Firefox 1.0+

Google Chrome / Chromium

Opera 5.0+

SeaMonkey 1.0+

Mozilla 1.0+

Netscape 7.0+

NetSurf 3.0

Dillo 3.0.2

Ещё

границы | htmlbook.ru



Сделайте страницу, как показано на рис. 1. Рамка должна корректно отображаться во всех современных браузерах.

Рис. 1

Сделайте индикатор прогресса, как показано на рис. 1. Ширина самого элемента 100%, высота 20px. Значение индикатора должно легко задаваться через ширину, как в процентах, так и пикселах.

Рис. 1

Сделайте страницу, как показано на рис. 1. Ширина блока резиновая и меняется в зависимости от размеров окна браузера. Указатель всегда располагается посередине блока, размеры указателя фиксированы.

Рис. 1

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

Добавьте к блоку небольшие квадратные вырезы по углам, как это показано на рисунке ниже. Код должен корректно работать в IE8+ и современных браузерах.

Сделайте рамку вокруг блока, как показано на рис. 1. Рамка должна корректно отображаться во всех современных браузерах.

Рис. 1. Двойная рамка вокруг блока

Придумайте пять способов создания рамки вокруг абзаца произвольного текста (тега <p>). Изменять и модифицировать код HTML нельзя, все изменения делаются только через стили. Кроссбраузерность можно не учитывать.

Для приведённого кода создайте стиль, с помощью которого можно получить результат, представленный на рис. 1. Страница должна корректно отображаться в браузерах IE8+, Firefox 5+, Opera 11+ и Chrome.

Рис. 1. Вид квадратов, оформленных с помощью стилей

Сделайте блок, показанный на рис. 1.

Рис. 1

С помощью стилей создайте текст в рамке, как показано на рис. 1.

Рис. 1

О сайте

Помощь

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

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

Технологии

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

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

Статьи

Блог

Практикум

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

Форум

HTML

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

XHTML

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

HTML5

CSS

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

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

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

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

CSS3 | Границы

Границы

Последнее обновление: 21.04.2016

Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

• border-width: устанавливает ширину границы

• border-style: задает стиль линии границы

• border-color: устанавливает цвет границы

Свойство border-width может принимать следующие типы значений:

• Значения в единицах измерения, таких как em, px или cm

  border-width: 2px;
  

• Одно из константных значений: thin (тонкая граница — 1px), medium (средняя по ширине — 3px), thick (толстая — 5px)

  border-width: medium;
  

Свойство border-color в качестве значения принимает цвет CSS:

border-color: red;

Свойство border-style оформляет тип линии границы и может принимать одно из следующих значений:

• none: граница отсутствует

• solid: граница в виде обычной линии

• dashed: штриховая линия

• dotted: линия в виде последовательности точек

• double: граница в виде двух параллельных линий

• groove: граница имеет трехмерный эффект

• inset: граница как бы вдавливается во внутрь

• outset: аналогично inset, только граница как бы выступает наружу

• ridge: граница также реализует трехмерный эффект

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border-style: solid;
				border-color: red;
				border-width: 2px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

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

/* для верхней границы */
border-top-width
border-top-style
border-top-color

/* для нижней границы */
border-bottom-width
border-bottom-style
border-bottom-color

/* для левой границы */
border-left-width
border-left-style
border-left-color

/* для правой границы */
border-right-width
border-right-style
border-right-color

Свойство border

Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство — border:

border: ширина стиль цвет

Например:

border: 2px solid red;

Для установки границы для отдельных сторон можно использовать одно из свойств:

border-top
border-bottom
border-left
border-right

Их использование аналогично:

border-top: 2px solid red;

Радиус границы

Свойство border-radius позволяет округлить границу. Это свойство принимает значение радиуса в пикселях или единицах em.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				width: 100px;
				height:100px;
				border: 2px solid red;
				border-radius: 30px;
			}
        </style>
    </head>
    <body>
		<div></div>
    </body>
</html>

Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

Так как у элемента может быть максимально четыре угла, то мы можем указать четыре значения для установки радиуса у каждого углов:

border-radius: 15px 30px 5px 40px;

Вместо общей установки радиусов для всех углов, можно их устанавливать по отдельности. Так, предыдущее значение border-radius можно переписать следующим образом:

border-top-left-radius: 15px;	/* радиус для верхнего левого угла */
border-top-right-radius: 30px;	/* радиус для верхнего правого угла */
border-bottom-right-radius: 5px;	/* радиус для нижнего левого угла */
border-bottom-left-radius: 40px;	/* радиус для нижнего правого угла */

Также border-radius поддерживает возможность создания эллиптических углов. То есть угол не просто скругляется, а использует два радиуса, образуя в итоге душу эллипса:

border-radius: 40px/20px;

В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y — 20 пикселей.

border | htmlbook.ru

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

Версии CSS

Описание

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

Синтаксис

border: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border</title>
  <style>
   .brd {
    border: 4px double black; /* Параметры границы */
    background: #fc3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.
   </div>
 </body>
</html>

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

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

Объектная модель

[window.]document.getElementById(«elementID»).style.border

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

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

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Таблицы и границы | 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>&nbsp;</td>
<td bgcolor=white>&nbsp;</td>
</tr>
<tr>
<td bgcolor=white>&nbsp;</td>
<td bgcolor=white>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td></tr></table>

Код значительно полегчал, хвала кодерам Студии Лебедева. Но и этот способ не лишен недостатков: попробуйте распечатать такую таблицу на принтере. Получилось? Фигушки, потому что Internet Explorer по умолчанию не печатает цвета и рисунки фона.

«Прежде чем распечатать эту страницу, пожалуйста, зайдите в меню Сервис, выберите пункт Свойства обозревателя, откройте вкладку Дополнительно и в разделе Печать отметьте галочку Печатать цвета и рисунки фона. Спасибо». Хватит бредить, лучше покланяемся в ножки CSS:

Действительно, что нам мешает указать каждой ячейке свойство border?

td{
border: solid black 1px
}

А то, мои дорогие, что таким образом на месте соприкасания ячеек получится рамка толщиной в два пикселя. По спецификации, эту проблему должно решать свойство border-collapse со значением collapse. В этом случае соседние границы должны «проглатывать» друг друга. Оставим это счастье нашим внукам, потому что нынче ни один браузер это свойство не поддерживает. Отсюда вытекает…

По-научному это называется разделением труда:

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 td, table.border th{
border:1px solid #CC0000
}

CSS Границы

Свойства границы CSS

Свойства границы CSS позволяют вам указать стиль, ширину и цвет границы элемента.

У меня бордюры со всех сторон.