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:
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:
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:
Form text alignment
Table text alignment and vertical alignment properties.
text-align property is set horizontal alignment, like left, right, or center:
Vertical-align property vertical alignment settings, such as top, bottom, or middle:
Form filling
If the space between the border control in the table of contents, you should use the fill attribute td and th elements:
Color table
The following example specifies the color of the border, and th elements of the text and background color:
Examples
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
try it"
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.