Latest web development tutorials

CSS Table (table)

Use CSS can greatly improve the appearance of HTML tables.

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbkop Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Koniglich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North / South Simon Crowther UK
Paris specialites Marie Bertrand France
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark

Table Border

Specifies the CSS table borders, use the border property.

The following example specifies a table of Th and TD elements black border:

Examples

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

try it"

Note that in the example above, the table has a double border. This is because the table and the th / td elements have separate borders.

In order to display a single frame of a table, use the border-collapse property.

Folding frame

border-collapse attribute set whether the table borders are collapsed into a single border or separated:

Examples

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

try it"

Table width and height

Width and height attributes define the width and height of the table.

The following example is set to 100% height table width of 50 pixels th element:

Examples

table
{
width:100%;
}
th
{
height:50px;
}

try it"

Form text alignment

Table text alignment and vertical alignment properties.

text-align property is set horizontal alignment, like left, right, or center:

Examples

td
{
text-align:right;
}

try it"

Vertical-align property vertical alignment settings, such as top, bottom, or middle:

Examples

td
{
height:50px;
vertical-align:bottom;
}

try it"

Form filling

If the space between the border control in the table of contents, you should use the fill attribute td and th elements:

Examples

td
{
padding:15px;
}

try it"

Color table

The following example specifies the color of the border, and th elements of the text and background color:

Examples

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

try it"

Examples

More examples

Make a personalized form
This example demonstrates how to create a personalized form.

Set the table caption position
This example demonstrates how to position the table header.