The best CSS Table (table) Tutorial In 2024, In this tutorial you can learn Table Border,Examples,Folding frame,Examples,Table width and height,Examples,Form text alignment,Examples,Examples,Form filling,Examples,Color table,Examples,More examples,
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 |
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.
border-collapse attribute set whether the table borders are collapsed into a single border or separated:
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:
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:
If the space between the border control in the table of contents, you should use the fill attribute td and th elements:
The following example specifies the color of the border, and th elements of the text and background color:
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.