Оформление таблиц

Property Values

Value	Description	Play it
auto	Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout	Play it »
fixed	Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells	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

Angular Material Table

From the name itself you can understand that this is a material design-based table. The creator of this template has given useful features like sorting and search options. An ample amount of space is given between each column so you no need to worry about long texts. But it is better to add auto adjust character to the table. The developer has shared the entire code used to make this material design table. Hence, you can easily work with this design and tune it as per your needs. Apart from the sorting and search options, this table also has a pagination option to easily navigate between the pages. If you like to add your own unique touch, take a look at our free pagination design collection. Overall, the Angular Material Table is one of the best material design CSS table templates.

Info / Download Demo

HTML тэги tr и td

• align — выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
• valign — выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top),
  вниз (bottom), по центру (middle),
• bgcolor — задает цвет строки.

html tr

Название таблицы

1	2	3
11 Текст во всех ячейках этой строки центрирован по центру как по вертикали, так и по горизонтали	12	13
21 Здесь текст прижат к левому краю по горизонтали и книзу — по вертикали	22	23
31 Текст во всех ячейках этой строки прижат по горизонтали к правому краю, по вертикали — кверху	32	33

<td><td>bgcolor=»red»

21 Здесь текст прижат к левому краю
по горизонтали и книзу — по вертикали

• width — задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина
  таблицы),
• height — задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.

<th>
1
2
3

Предыдущий урок Вернуться в раздел Следующий урок Скачайте одним архивом видеоуроки HTML!

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Fallback FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens

image-rendering
@import
isolation

justify-content

@keyframes

left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
mask-image
mask-origin
mask-position
mask-repeat
mask-size
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position

quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Examples

Example 1

For a challenging table style, look at the «Nutrition Facts»
table included with every cereal packet in the USA. I haven’t had time
to draw or scan one of these fully yet so reach for the cereals …

On familia muesli boxes, the legend «Cereal with 1/2 cup Vitamin A and
D Fortified Skim Milk» is typeset with the text running vertical up the
table. Most cereal packets give this horizontally though. This raises the
issue of being able to alter the text direction in the style sheet,
e.g. «run: up», «down» or «right».

The other notable feature is how «Dietary Fiber» and «Sugars» are
indented along with the horizontal rule above these two rows. This
could perhaps be achieved by «TR {padding-left: 3em}». One would then
have to draw the border above «Dietary Fiber» and above «Sugars»
on these cells, while setting the bottom border for «Total Carbohydrate»
to none. Its not obvious how to do this with the rules properties
because of the asymetry between «Total Carbohydrate» / «Dietary Fiber»
and «Protein» / «Sugars». This may motivate using border properties on
TR elements, though.

Example 2

<STYLE>
  table {border: thick outset; padding 3px}
  td {border: thin inset; margin: 3px}
</STYLE>

<TABLE>
<TR><TD>foo<TD>bar
<TR><TD>foo<TD>bar
</TABLE>

Example 3

<STYLE>
  table {border: thick outset; padding: 1px;
         rules: rows; rule-style: groove}
</STYLE>

<TABLE>
<TR><TD>foo<TD>bar
<TR><TD>foo<TD>bar
</TABLE>

Example 4

<STYLE>
  table {border: thick solid; padding none;
         rules: all thin solid}
</STYLE>

<TABLE>
<TR><TD>foo<TD>bar
<TR><TD>foo<TD>bar
</TABLE>

or perhaps as:

<STYLE>
  table {border: thick solid; padding: none}
  td {border: thin solid; margin: none}
</STYLE>

Rules between Rows and Columns

Like the HTML table model, the presence or absence of these rules is
specified using the RULES property, which can be one of None, Groups,
Rows, Cols or All, where:

NONE

Suppresses internal rulings.

GROUPS

The THEAD, TFOOT and TBODY elements divide the table into groups of
rows, while COLGROUP elements divide the table into groups of columns.
This choice places a horizontal rule between each row group and a
vertical rule between each column group. Note that every table has at
least one row and one column group.

ROWS

As RULES: GROUPS plus horizontal rules between all rows.
User agents may choose to use a heavier rule between groups of rows and
columns for emphasis.

COLS

As RULES: GROUPS plus vertical rules between all
columns. User agents may choose to use a heavier rule between groups of
rows and columns for added emphasis.

ALL

Place rules between all rows and all columns. User agents may choose to
use a heavier rule between groups of rows and columns for added emphasis.

Rule-Style

This sets the style used for drawing rules. It can be one or two
values from the following list. If two values are given, the first is
used for vertical rules and the second for horizontal rules.

GROOVE

A 3D groove, with the left and right sides drawn with a light colored
line to the immediate left of a dark colored line. The top and bottom
sides are drawn with a dark colored line immediately above a light
colored line.

RIDGE

A 3D ridge, with the left and right sides drawn with a dark colored
line to the immediate left of a light colored line. The top and bottom
sides are drawn with a light colored line immediately above a dark
colored line.

DOTTED

A simple dotted line.

DASHED

A simple dashed (i.e. broken) line.

SOLID

A continous line.

DOUBLE

A double line made up from an outer thicker solid line
next to a thinner inner solid line.

Rule-Width

This sets the width of the rule. One or two values are
expected using the standard CSS notation for lengths. If two
values are given, the first applies to vertical rules, while
the second applies to horizontal rules.

Rule-Color

This sets the color of the rule. One or two values are
expected using the standard CSS notation for colors. If two
values are given, the first applies to vertical rules, while
the second applies to horizontal rules.

This raises the same questions as for Border-Color.

Defining Rules with the TABLE element

The various rule properties can be used with the TABLE element, e.g.

    table {border-style: outset; border-width: 5px; rules: cols}

In this case the rules apply to both horizontal and vertical rules.
between all rows and columns, including between row groups and column
groups.

Defining Rules with the COLGROUP element

The rule-style, rule-width and rule-color properties can also be used
with the COLGROUP element to set the properties of rules drawn between
columns. This allows you to override the defaults set with the TABLE
element. For example you can set a thicker rule between column groups
as in:

    table {rules: cols; rule-style: solid; rule-width: 2px}
    colgroup {rule-width: 1px}

This draws rules between column groups 2 pixels wide, while rules
between ordinary columns are drawn 1 pixel wide.

Define Rules with THEAD, TBODY and TFOOT

The rule-style, rule-width and rule-color properties can also be used
with these element to set the properties of rules drawn between
rows. This allows you to override the defaults set with the TABLE
element. For example you can set a default for the table and override
it for the table head:

    table {rules: rows; rule-style: dotted; rule-width: 1px}
    thead {rule-width: 0px}

This draws 1 pixel high lines between all rows except within the
table head, where the rules are suppressed by setting their height
to zero.

The rules property can also be used to give values for rule-width,
rule-style and rule-color. Its formal definition is:

rules: none | groups | rows | cols | all
	]]

e.g. «rules: rows thin dotted black«.

NoteShould we allow row-rule and col-rule properties to make it
easy to specify different styles for rules between rows and columns?

Столбцы и их группировка

Так как ячейки таблицы являются потомками строк таблицы, то для формирования столбцов имеет смысл использовать некоторые свойства. Модель таблицы CSS позволяет применять следующие свойства для столбцов и их группировки:

• border — обычное свойство, пока свойство border-collapse не используется для элемента таблицы;
• background — обычное свойство, пока строка и ячейка имеют прозрачный фон;
• width — установка ширины столбца;
• visibility — если имеет значение collapse (единственное доступное значение), то ячейка столбца не будет выводиться (она объединяется с другими столбцами и ширина таблицы выравнивается).

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too
small to display the full content:

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	50	50	50	50	50	50	50	50	50	50	50	50
Eve	Jackson	94	94	94	94	94	94	94	94	94	94	94	94
Adam	Johnson	67	67	67	67	67	67	67	67	67	67	67	67

Add a container element (like <div>) with around the <table> element to make it responsive:

Example

<div style=»overflow-x:auto;»><table>
… table content …</table></div>

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though «overflow:scroll» is set).

Definition and Usage

The property defines the algorithm
used to lay out table cells, rows, and columns.

Tip: The main benefit of table-layout: fixed; is that the
table renders much faster. On large tables, users will not see any part of the
table until the browser has rendered the whole table. So, if you use
table-layout: fixed, users will see the top of the table while the browser loads
and renders rest of the table. This gives the impression that the page loads a
lot quicker!

Default value:	auto
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.tableLayout=»fixed» Try it

Цвет фона и текста

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

• background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
• bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

Например:

<table border="1" bgcolor="green">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега <table>:

• cellspacing — расстояние между границами соседних ячеек;
• cellpading — расстояние между содержимым и границей ячейки.

Например:

<table border="1" bgcolor="green" cellspacing="20" cellpadding="20">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td>
 background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Визуальное отображение данного кода в браузере таково:

Выравнивание таблицы в HTML

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное (align) и вертикальное (valign) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

• left — выравнивание по левой границе;
• right — выравнивание по правой границе;
• center — выравнивание по центру.

Параметр valign может иметь такие значения:

• bottom — выравнивание по нижней границе;
• top — выравнивание по верхней границы;
• middle — выравнивание посередине.

Пример:

<table border= "1">
 <td width="300" height="200">Текст 1</td>
   <td width="300" height="200" align="right" valign="top">Текст 2</td>
</table>

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

Например:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr>
    <td align="center">
      <table cellpadding="60" cellspacing="4" border="1">
        <tr>
          <td>
            Текст таблицы
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Вставка изображения в HTML таблицу

У вебмастеров часто возникает вопрос о том, как вставить картинку в HTML таблицу? Для того чтобы это осуществить, необходимо прописать адрес или имя изображения в соответствующей ячейке после тега <td>.

Например:

<table border= "1">
<tr align="left"> 
   <td><img src="http://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpg"></td> 
   <td> Содержимое 2 ячейки </td> </tr>
<tr align="right"> 
   <td> Содержимое 3 ячейки </td>
    <td> Содержимое 4 ячейки </td> </tr>
</table>

Дополнительными атрибутами в данном случае являются:

• width — ширина;
• height — высота;
• alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
• title — подпись к картинке;
• align — горизонтальное выравнивание;
• valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href=»страница, на которую ведёт ссылка»><img src=»имя файла.jpg»></a>, его можно использовать в качестве ссылки.

Объединение ячеек в HTML таблице

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.

Объединение столбцов одной строчки выглядит так:

<table border="1">
<tr>
   <td colspan="3">Текст 2</td>
</tr>
<tr>
   <td>Текст 2</td>
   <td>Текст 3</td>
   <td>Текст 4</td>
</tr>
</table>

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

<table border="1">
<tr>
   <td rowspan="3">Текст 1</td>
   <td>Текст 2</td>
</tr>
<tr>
   <td>Текст 3</td>
</tr>
<tr>
   <td>Текст 4</td>
</tr>
</table>

Should You Use CSS Tables?

Are css tables better than html tables? If so what advantages do they have and if not why should we use them at all? Good questions that I don’t have great answers for.

I can say I’ve never used a css table in practice and have no intention of using them any time soon. If a page calls for tabular content it strikes me than an html table is called for and I think we have and will have better techniques for site layout than css tables.

I took a look at an older post I wrote on css vs tables to remind myself of the cons for using html tables for layout over a combination of divs and css.

• Extra code — html tables require more structural code than divs, but css tables use just as much. If anything css tables use more since ids and classes will likely be added. If html tables use too much code then css tables do too.
• Rigid structure — html tables are source dependent. The order you structure the cells is the same order in which they’ll display. The same is essentially true of css tables as well.
• Browser rendering — browsers require multiple passes at the structure of html tables. They should only require one pass to display a css table if the table-layout is set to fixed. They’ll require the same multiple passes if set to auto.

Considering the above css tables aren’t offering enough benefit over html tables to use them for layout.

We could reach and suggest that since the css can be easily changed a css table is less rigid than an html table, but in practice I think they’re going to be just as rigid.

CSS tables do have the advantage of being more semantically correct as we can choose html elements that better describe our content.

Overall it’s hard for me to see much improvement in css tables over html tables, some perhaps, but not enough to justify to myself using them.

I think some of the other css layout modules on the horizon will be better and even our current practice of using floats and positioning for layout are still a better option.

At the same time I can’t say I’ve worked much with css tables. This post is the most time I’ve spend with them since they’ve been introduced and I’m open to someone else’s reasons for why we should use them.

I have a hunch they’ll remain in use to solve some specific problems like vertically centering content or cleverly switching the display order of different elements in a responsive design.

They may also prove to be a good pattern for navigation. I don’t see them being a viable solution to the problem of layouts though.

CSS Table

CSS table is an intuitively designed table template. The developer had used the given space elegantly with the help of modern CSS animation effects. In some reports you have to be more elaborate about the stats you shared in the table, the rows in this table template expands automatically to help you add a small note about that particular row. To help you organize the related contents effectively color codes are used. The vertical color label at the end helps you to group the data for later reference. In the demo version, this template does not support filter options, when you add filter option this color grouping will give a nice visual appearance and it will be easy for the users to find the dataset easily.

Info / Download Demo

HTML Упражнения

HTML Теги стиля

Тег	Описание
<style>	Определяет информацию о стиле для документа HTML
<link>	Определяет ссылку между документом и внешним ресурсом

Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов.

Вопросы для самоконтроля

• Что такое стилизация веб-страниц?
• Как расшифровывается CSS?
• Для чего нужны каскадные таблицы стилей?
• Как можно добавить CSS до HTML-элементов?
• Какой атрибут использует встроенный CSS?
• В каком разделе веб-страницы указывается внутренний CSS?
• Как указывается внешняя таблица стилей в HTML-документе?
• Какое расширение должно быть в файле внешней таблицы стилей?
• Какое CSS-свойство определяет цвет текста?
• Какое CSS-свойство определяет семейство шрифта?
• Какое CSS-свойство определяет размер текста?
• Какое CSS-свойство определяет границу вокруг HTML-элемента?
• Какое CSS-свойство определяет внутренний отступ между текстом и границей HTML-элемента?
• Какое CSS-свойство определяет внешний отступ вне границы HTML-элемента?
• Какой атрибут используется для конкретного стиля определённого HTML-элемента?
• С помощью какого символа в CSS указывается идентификатор (id) HTML-элемента?
• Какой атрибут используется для определённых типов HTML-элементов?
• С помощью какого символа в CSS указывается название класа HTML-элемента?
• Какие есть способы ссылки на внешний файл стилей?

More Examples

How to add collapsed borders to a table (with CSS):

<html><head><style>table, th, td {  border: 1px solid
black;  border-collapse: collapse;}</style></head><body><table>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table></body></html>

How to right-align a table (with CSS):

<table style=»float:right»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to center-align a table (with CSS):

<html><head><style>table, th, td {  border: 1px solid
black;}table.center {  margin-left: auto;  
margin-right: auto;}</style></head><body><table
class=»center»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to add background-color to a table (with CSS):

<table style=»background-color:#00FF00″>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to add padding to a table (with CSS):

<html><head><style>table, th, td {  border: 1px solid
black;}th, td {  padding: 10px;}</style></head><body><table>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table></body></html>

How to set table width (with CSS):

<table style=»width:400px»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to create table headers:

How to create a table with a caption:

<table> 
<caption>Monthly savings</caption>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

Fitness Pricing

Fitness pricing, as the name implies this CSS table is designed specifically for fitness websites. Health and fitness websites are the second most successful businesses to implement the membership system. The subscription model varies from per month to lifetime access. To explain all these pricing model to the users is quite a difficult job. But with this pricing table template, you can clearly highlight the benefits and unique features of each plan to the users.

Another advantage of this template is, it is mobile responsive out of the box. The table is made large enough to add it easily to the website sections easily. Animation effects are simple and clean if you need something more interactive you can customize it by yourself. Since this template uses the latest CSS3 framework, customizing this template will be an easy job. If you are running an online membership site, take a look at our dashboard template collection to manage users easily.

Info / Download Demo

Выравнивание содержимого таблицы (по горизонтали и вертикали)

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

И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.

Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).

Для нашей шапки установим  выравнивание по центру, по середине.

 <TR ALIGN="CENTER" VALIGN=”MIDDLE”> 
 

Также выровняем содержание ячеек с нумерацией и телефонами по центру.

 <HTML>
<HEAD>
<TITLE>Телефонный справочник </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600” width="400" BGCOLOR="#FFFFCC">
<TR BGCOLOR=”#99CC33” HEIGHT="50" VALIGN="MIDDLE" ALIGN="CENTER">
<TD WIDTH="50">№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>1</TD>
<TD>Фрося Бурлакова</TD>
<TD ALIGN="CENTER">8-952-987-13-20</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>2</TD>
<TD>Иван Петров</TD>
<TD ALIGN="CENTER">8-918-964-70-11</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>3</TD>
<TD>Афоня Ивлев</TD>
<TD ALIGN="CENTER">8-961-594-12-45</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML> 
 

В браузере увидим:

Fixed Column Table

It is not always possible to show all the data and stats in a single table. We have to provide scrolling options to help users see the complete record. Well, this CSS table template gives you that option out of the box. As the name implies it has a fixed main column and all other related fields can be scrolled horizontally. The developer has given you an ample amount of space in the column to add even longer contents without any trouble. Since this template uses HTML5 and CSS3 frameworks, you get more natural colors and a mobile responsive table. If you need to add more rows, you can add them easily, this table template can handle it.

Info / Download Demo

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет
горизонтальная полоса для разделения текста и подписи снизу. Мы
используем свойство ‘border-top’ для того чтобы добавить
прерывистую линию над элементом <address>
(строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>

Важно помнить!

Теги <thead> и <tfoot> нужны не всегда. Бывают таблицы без шапки и подвала.

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

К тому же браузер всё равно подставит этот тег сам, а всегда полагаться на браузеры — значит оставить место для возможных ошибок.

Пример:

1	Мавзалеев И. В.	10.09.1992
2	Киреева А. Ю.	02.05.1996
3	Корнеев И. Ю.	09.10.1990
4	Тресков В. А.	25.03.1993
5	Ибрагимов А. Е.	15.10.1994
6	Борисенко Д. С.	10.10.1991

В таблице выше шесть строк, каждая из которых содержит три ячейки. Здесь нет важных для смысла признаков, по которым можно сгруппировать содержимое таблицы. Поэтому будет достаточно тега <caption> (придумаем его и скроем) и тега <tbody>, а вот теги <thead> и <tfoot> можно опустить.

Diamond Pricing Table

Diamond is a perfect table template for startups and modern websites. With the neat transparent content blocks, this template improves the readability of the texts without spoiling the visual aesthetics of the design. Another unique feature of this pricing table is it has star rating in each pricing table. Ratings and reviews will help the user to choose the better plan, if you are running a restaurant website you must know how an online review will boost your business. Bold texts are used to highlight important points and call to action buttons are provided at the end of each table to take the users to the checkout page easily.

Info / Download Demo

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

К открывающему тегу <table> можно прописывать различные атрибуты.

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

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

В разобранном выше примере мы выравнивали таблицу по центру align=»center».

Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы <td> или строкам <tr>. Таким образом, в разных ячейках выравнивание будет разное.

Например

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 — линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>
• cols — линия отображается между колонками
• none — все границы скрываются
• rows — граница рисуется между строками таблицы, созданными через тег <tr>

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

13. Свойство class=»имя_класса» — можно указать имя класса, которому принадлежит таблица.

14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.

Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге <td>.