CSS Table ========= Table Borders ------------- The example below specifies a black border for table, th, and td elements: table, th, td { border: 1px solid black; } Notice that the table in the example above has double borders. This is because both the table and the th/td elements have separate borders. To display a single border for the table, use the border-collapse property. Collapse Borders ---------------- The border-collapse property sets whether the table borders are collapsed into a single border or separated: table { border-collapse:collapse; } table,th, td { border: 1px solid black; } Table Width and Height ---------------------- Width and height of a table is defined by the width and height properties. The example below sets the width of the table to 100%, and the height of the th elements to 50px: table { width:100%; } th { height:50px; } Table Text Alignment -------------------- The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets the horizontal alignment, like left, right, or center: td { text-align:right; } The vertical-align property sets the vertical alignment, like top, bottom, or middle: Example td { height:50px; vertical-align:bottom; } Table Padding ------------- To control the space between the border and content in a table, use the padding property on td and th elements: td { padding:15px; } Table Color ----------- The example below specifies the color of the borders, and the text and background color of th elements: table, td, th { border:1px solid green; } th { background-color:green; color:white; Example 1 ---------
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Berglunds snabbköp | Christina Berglund | Sweden |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Königlich Essen | Philip Cramer | Germany |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
North/South | Simon Crowther | UK |
Paris spécialités | Marie Bertrand | France |
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Berglunds snabbköp | Christina Berglund | Sweden |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
North/South | Simon Crowther | UK |
Note: IE8 supports the caption-side property if a !DOCTYPE is specified.