Html тег

Wiki table markup summary

{\|	table start, required
\|+	table caption, optional; only between table start and table row
\|-	table row, optional on first row—wiki engine assumes the first row
!	table header cell, optional. Consecutive table header cells may be added on same line separated by double marks () or start on new lines, each with its own single mark ().
\|	table data cell, optional. Consecutive table data cells may be added on same line separated by double marks () or start on new lines, each with its own single mark ().
\|}	table end, required

The above marks must start on a new line except the double and for optionally adding consecutive cells to a line. However, blank spaces at the beginning of a line are ignored.
HTML attributes. Each mark, except table end, optionally accepts one or more HTML attributes. Attributes must be on the same line as the mark. Separate attributes from each other with a single space.
- Cells and caption ( or , or , and ) hold content. So separate any attributes from content with a single pipe (). Cell content may follow on same line or on following lines.
- Table and row marks ( and ) do not directly hold content. Do not add pipe () after their optional attributes. If you erroneously add a pipe after attributes for the table mark or row mark the parser will delete it and your final attribute if it was touching the erroneous pipe!
Content

Pipe character as content. To insert a pipe (|) character into a table, use the | escaping markup.

may (a) follow its cell mark on the same line after any optional HTML attributes or (b) on lines below the cell mark. Content that uses wiki markup that itself needs to start on a new line, such as lists, headings, or nested tables, must be on its own new line.

Colspan

You can use the attribute to make a cell span multiple columns.

To use it, just provide the number of columns that the cell should span.

So here’s an example of a table header that spans two columns.

<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan=»2″>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
</body>
</html>

When you do this, you’ll need to remove the unnecessary cells. So in the above example, there are only two table headers are defined in the table even though there are three columns.

Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much.
However, they can be used if the output medium is known, such
as for print layout.

Unit	Description
cm	centimeters Try it
mm	millimeters Try it
in	inches (1in = 96px = 2.54cm) Try it
px *	pixels (1px = 1/96th of 1in) Try it
pt	points (1pt = 1/72 of 1in) Try it
pc	picas (1pc = 12 pt) Try it

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution
screens 1px implies multiple device pixels.

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border

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

table, th, td { border: 1px solid black; }

Попробовать »

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

Даже если убрать промежутки между ячейками с помощью значения свойства , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table class="first">
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
   
</html>

This will produce the following result −

Table border

By default, a table on a web page is displayed without a border, and the CSS property is used to add a frame to the table, as with all other elements. But it is worth paying attention to the fact that if you add a frame only to the element, it will appear around the entire table. In order for table cells to also have a border, you will need to set the border property for both the and elements.

table, th, td { border: 1px solid black; }

Try it »

The table and cells now have borders, and each cell and table have their own borders. As a result, there is an empty space between the borders, the CSS property of the is used to control the size of the space, which is set for the entire table. In other words, you cannot control the spacing between different cells individually.

Even if you remove the spacing between cells by using the value 0 of the property, the cell borders will be touching each other doubling. Use the property to combine cell borders. It can take two values:

separate: is the default value. Cells are displayed at a small distance from each other, each cell has its own border.
collapse: joins adjacent borders into one, all spaces between cells, and also between cells and the table border are ignored.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Name</th><th>Surname</th></tr>
      <tr><td>Homer</td><td>Simpson</td></tr>
      <tr><td>Marge</td><td>Simpson</td></tr>
    </table>
    <br>
    <table class="first">
      <tr><th>Name</th><th>Surname</th></tr>
      <tr><td>Homer</td><td>Simpson</td></tr>
      <tr><td>Marge</td><td>Simpson</td></tr>
    </table>
  </body>
</html>

Try it »

Table Width

Widths can be specified using the CSS property, in either pixels or percentages. Specifying the width in pixels allows you to specify an exact width. Percentages allows the table to «grow» or «shrink» depending on what else is on the page and how wide the browser is.

Here’s an example of using percentages.

table {
width: 100%;
}

Note that we use only the selector in this case, because we’re only setting the width of the table — not the individual cells.

Here’s what the document looks like now.

<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid orange;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
</body>
</html>

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Why Oracle-Specific?

I’ve documented these database conventions to be used with Oracle databases.

These SQL table naming conventions can be applied across any relational database. You’re not limited to just Oracle.

But, I’ve focused on developers working on Oracle databases for several reasons:

Oracle SQL code and table names are case-insensitive.
It’s what I have the most experience in.

So, if you’re working with Oracle, I suggest following these conventions if you don’t have any already.

(Related – How to Become a Database Developer: The Definitive Guide)

Now, onto the big question on table naming conventions – singular or plural?

Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −

<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>
         
         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>
         
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody>
         
      </table>
   </body>
	
</html>

This will produce the following result −

Relative Lengths

Relative length units specify a length relative to another length property.
Relative length units scales better between different rendering mediums.

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font)	Try it
ex	Relative to the x-height of the current font (rarely used)	Try it
ch	Relative to width of the «0» (zero)	Try it
rem	Relative to font-size of the root element	Try it
vw	Relative to 1% of the width of the viewport*	Try it
vh	Relative to 1% of the height of the viewport*	Try it
vmin	Relative to 1% of viewport’s* smaller dimension	Try it
vmax	Relative to 1% of viewport’s* larger dimension	Try it
%	Relative to the parent element	Try it

Tip: The em and rem units are practical in creating perfectly
scalable layout!* Viewport = the browser window size. If the viewport is 50cm
wide, 1vw = 0.5cm.

Атрибуты тега

Как и другие теги HTML тег добавления таблиц так же имеет свои специальные атрибуты.

bgcolor — атрибут устанавливает цвет фона таблицы, в качестве значений используются цвета системы RGB, либо названия цвета.

align — задает выравнивание таблицы на странице, таблица может быть выровнена по левому краю, по центру и по правому краю. Если у таблицы задано выравнивание по левому или правому краю то текст на странице будет обтекать таблицу сбоку и снизу.

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

border — устанавливает толщину границы в пикселях вокруг таблицы. При указании данного атрибута так же отображаются границы между ячейками.

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

cellspacing — определяет расстояние между внешними границами ячеек. Если у таблицы задан атрибут border, то толщина границы в данном случае будет входить в общее значение расстояния.

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

More Examples

Example

A dashed border:

div {border-style: dashed;}

Example

A solid border:

div {border-style: solid;}

Example

A double border:

div {border-style: double;}

Example

A groove border:

div { border-style: groove; border-color: coral;
border-width: 7px;}

Example

A ridge border:

div { border-style: ridge; border-color: coral; border-width: 7px;}

Example

An inset border:

div { border-style: inset; border-color: coral;
border-width: 7px;}

Example

An outset border:

div { border-style: outset; border-color: coral; border-width: 7px;}

Example

Set different borders on each side of an element:

p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}

SQL CREATE TABLE Example

The following example creates a table called «Persons» that contains five columns: PersonID, LastName, FirstName,
Address, and City:

Example

CREATE TABLE Persons
(

PersonID int,

LastName varchar(255),

FirstName varchar(255),

Address varchar(255),

City varchar(255)
);

The PersonID column is of type int and will hold an integer.

The LastName, FirstName, Address, and City columns are of
type varchar and will hold characters, and the maximum length for these fields
is 255 characters.

The empty «Persons» table will now look like this:

PersonID	LastName	FirstName	Address	City

Tip: The empty «Persons» table can now be filled with data with the
SQL INSERT INTO statement.

Alternating Background Color

As I explained previously, background color can be added to HTML elements using the CSS property.

You can apply a background color to the whole table, or just parts of it, like say, the table cells, or certain rows, etc.

Now let’s use a little CSS trick to apply alternating colors to the rows of our table. So, the first row will be color A, the second will be color B, the third will be color A, the fourth will be color B, and so on.

To do this, use the CSS pseudo-class selector along with the and value to determine the background color of odd and even rows.

table.alt tr:nth-child(even) {
background-color: #eee;
}
table.alt tr:nth-child(odd) {
background-color: #fff;
}

Note that in this example, I also create a class called and apply it to the table, then use that class as part of my selector in the style sheet. So if there’s more than one table in the document, only tables with that class will have these styles applied to them.

Here’s what the document looks like with these styles.

<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
table.alt tr:nth-child(even) {
background-color: #eee;
}
table.alt tr:nth-child(odd) {
background-color: #fff;
}
</style>
</head>
<body>
<table class=»alt»>
<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
</body>
</html>

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>

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>

Basics

The following table lacks borders and good spacing but shows the simplest wiki markup table structure.

You type

You get

{|
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

Orange	Apple
Bread	Pie
Butter	Ice cream

The cells in the same row can be listed on one line separated by (two pipe symbols).
If the text in the cell should contain a line break, use instead.

You type

You get

{|
|Orange||Apple||more
|-
|Bread||Pie||more
|-
|Butter||Ice<br/>cream||and<br/>more
|}

Orange	Apple	more
Bread	Pie	more
Butter	Icecream	andmore

Extra spaces within cells in the wiki markup, as in the wiki markup below, do not affect the actual table rendering.

You type

You get

{|
|  Orange || Apple || more
|-
|   Bread || Pie || more
|-
|   Butter || Ice cream || and more
|}

Orange	Apple	more
Bread	Pie	more
Butter	Ice cream	and more

You can have longer text or more complex wiki syntax inside table cells, too:

You type

You get

{|
|Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, 
sed diam voluptua. 

At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet. 
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}

Lorem ipsum dolor sit amet,

consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat,
sed diam voluptua.

At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet.

Lorem ipsum dolor sit amet
consetetur sadipscing elitr
sed diam nonumy eirmod tempor invidunt

Table headers

Table headers can be created by using «» (exclamation mark) instead of «» (pipe symbol).
Headers usually show up bold and centered by default.

You type

You get

{|
! style="text-align:left;"| Item
! Amount
! Cost
|-
|Orange
|10
|7.00
|-
|Bread
|4
|3.00
|-
|Butter
|1
|5.00
|-
!Total
|
|15.00
|}

Item	Amount	Cost
Orange	10	7.00
Bread	4	3.00
Butter	1	5.00
Total		15.00

When using attributes as in the heading ‘Item’ a vertical bar ‘|’ is used for separation. Not an exclamation character ‘!’.

Caption

A table caption can be added to the top of any table as follows.

You type

You get

{|
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

Food complements
Orange	Apple
Bread	Pie
Butter	Ice cream

class=»wikitable»

Basic styling (light gray background, borders, padding and align left) can be achieved by adding class=»wikitable».

You type

You get

{| class="wikitable"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

Food complements
Orange	Apple
Bread	Pie
Butter	Ice cream

HTML colspan and rowspan

You can use HTML colspan and rowspan attributes on cells for advanced layout.

You type

You get

{| class="wikitable"
!colspan="6"|Shopping List
|-
|rowspan="2"|Bread & Butter
|Pie
|Buns
|Danish
|colspan="2"|Croissant
|-
|Cheese
|colspan="2"|Ice cream
|Butter
|Yogurt
|}

Shopping List
Bread & Butter	Pie	Buns	Danish	Croissant
Cheese	Ice cream	Butter	Yogurt

Чередование фонового цвета строк таблицы

При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      .alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr class="alt"><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr class="alt"><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>

Попробовать »

Добавлять атрибут к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: (четные) или (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }

Попробовать »