Slide 5.13: CSS tables
Slide 5.15: CSS box model
Home

CSS Tables (Cont.)


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:
   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; }
All CSS Table Properties

Property Description Values CSS
border-collapse Sets whether the table borders are collapsed into a single border or detached as in standard HTML collapse
separate
2
border-spacing Sets the distance that separates cell borders (only for the "separated borders" model) length length 2
caption-side Sets the position of the table caption top
bottom
left
right
2
empty-cells Sets whether or not to show empty cells in a table (only for the "separated borders" model)  show
hide
2
table-layout Sets the algorithm used to display the table cells, rows, and columns auto
fixed
2


Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web: