Html таблицы основы

More Examples

Example

Set a color for the border with a HEX value:


div {border-color: #92a8d1;}

Example

Set a color for the border with an RGB value:

div {border-color: rgb(201, 76, 76);}

Example

Set a color for the border with an RGBA value:

div {border-color: rgba(201, 76, 76, 0.3);}

Example

Set a color for the border with a HSL value:


div {border-color: hsl(89, 43%, 51%);}

Example

Set a color for the border with a HSLA value:

div {border-color: hsla(89, 43%, 51%, 0.3);}

Example

Set a different border-color for each side of an element:

div.ex1 {border-color: #0000ff;}div.ex2 {border-color: #ff0000 #0000ff;} div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}div.ex4 {border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);}

Золотое правило сравнительных таблиц

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

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

  • Не стоит манипулировать своими пользователями, тогда вы не потеряете их доверия. Очень многие клиенты сразу распознают манипуляцию, что очень сильно сокращает кредит доверия к вашему сайту.
  • Когда люди покупают то, что для них лучше, вероятнее всего, они останутся довольны и станут рекламировать ваш бренд друзьям и знакомым (что увеличит индекс потребительской лояльности вашей компании).
  • Кроме оценки следующего клика, вам следует спрогнозировать и следующий год: чем больше кто-то ценит текущее взаимодействие с вашим сайтом, тем более вероятно, что он превратится в лояльного возвратного пользователя.

Property Values

Value Description Play it
none Default value. Specifies no border Play it »
hidden The same as «none», except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Оформление таблиц CSS свойствами

После создания таблицы средствами HTML, переходим к следующему этапу, оформление таблицы с помощью стилей CSS, которые применим к тегам <TABLE>, <TH>,<TD>, <CAPTION>.

Рамки для ячеек

Рамку вокруг ячеек можно рисовать с помощью CSS свойства border, со следующим синтаксисом:

border: “толщина линии” “тип начертания” “цвет”;
  • толщина линии – может задаваться в пикселях (px), а также с помощью специальных зарезервированных слов: thin (2 px), medium (4 px) и thick (6 px);
  • тип начертания – значения атрибута специальные слова: dotted (точечный пунктир), dashed(пунктирная линия), solid (линия), double (двойная линия) и т.д.
<STYLE>
  TABLE,TH,TD {border:1px solid black}
</STYLE>

 


Рис 5. Применение к ячейкам таблицы свойства border, для обрамления каждой ячейки рамкой.

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

  • collapse — рамка между ячейками только одна;
  • separate – каждая ячейка обрамляется собственной рамкой;
<STYLE>
  TABLE,TH,TD{border:1px solid black;border-collapse:collapse;}
</STYLE>

 

Рис 6. Применение к таблице свойства border-collapse. Соседние ячейки отделяются одной рамкой.

Размеры ячеек

По умолчание размеры ячеек, браузер формирует в зависимости от их содержания, если необходимо задать статичную форму, воспользуйтесь стилевым свойством width, height. При этом, если содержимое ячейки не помещается в одну строку, то происходит его перенос на следующую.

<STYLE>
  TH,TD{width:100px}
  TH{height:30px}
</STYLE>

 

Рис 7. Применение свойства width и height, для задания ширины и высоты ячеек.

Отступы в ячейках

Существует два вида отступов внешние и внутренние, первый вид отступа задается между границами соседних ячеек, второй от границ ячеек до их содержимого. CSS свойства создающие отступы указаны ниже:

  • padding – внутренний отступ, значение устанавливается в пикселях (px);
  • border-spacing – внешний отступ, значение устанавливается также в пикселях (px). Данный параметр не следует употреблять, если {border-collapse:collapse}, т.к. отступ устанавливается между границами соседних ячеек, а при наличие указанного свойства соседние ячейки отделены лишь одной рамкой;
<STYLE>
  CAPTION,TH,TD{padding:5px}
</STYLE>

 

Рис. 8. Применение к таблице свойства padding, для задания отступов.

Расположение заголовка

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

  • top – заголовок располагается над таблицей;
  • bottom – заголовок располагается под таблицей;
<STYLE>
  CAPTION{caption-side:top}
</STYLE>

Цвет ячеек


Для закрашивания ячейки определенным цветом необходимо воспользоваться свойством background-color:

<STYLE>
  TH{background-color:#E0E6FA;}
  TD{background-color:#F6F8FE;}
<STYLE>

 

Рис. 9. Применение к ячейке свойства background-color.

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

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

  • text-align – горизонтальное выравнивание содержимого ячейки, принимает значения left, center, right;
  • vertical-align – вертикальное выравнивание содержимого. Значения: top, middle, bottom;
<STYLE>
  CAPTION{text-align:left;vertical-align:middle}
  TH,TD{text-align:center;vertical-align:middle}
</STYLE>

 

Рис. 10. Выравнивание содержимого ячеек свойствами text-align и vertical-align.

Оформление содержимого ячейки

Под оформление содержимого понимается форматирование текста находящегося в ячейках. Основное CSS свойство, применяемое для этой цели является font:

<STYLE>
  CAPTION{font:bold 20px "sans-serif"}
  TH{font:bold 17px "sans-serif"}
  TD{font:normal 15px "sans-serif"}
</STYLE>

 

Рис. 11. Оформление содержимого ячейки свойством font.

Подробнее о свойстве font, а также других стилевых свойств для оформления текста читайте в статье Оформление текста с помощью CSS

Все CSS стили применяемые к таблице

<STYLE>
  TABLE,TH,TD{border:1px solid black;border-collapse:collapse;}
  TH,TD{width:100px}
  TH{height:30px}

  CAPTION,TH,TD{padding:5px}

  CAPTION{caption-side:top}

  TH{background-color:#E0E6FA;}
  TD{background-color:#F6F8FE;}

  CAPTION{text-align:left;vertical-align:middle}
  TH,TD{text-align:center;vertical-align:middle}

  CAPTION{font:bold 20px "sans-serif"}
  TH{font:bold 17px "sans-serif"}
  TD{font:normal 15px "sans-serif"}</STYLE>
</STYLE>

Property Values

Value Description Play it
none Specifies no border. This is default Play it »
hidden The same as «none», except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index


С этим читают