Tables


you saw a couple of examples that use CSS with tables. Properties that are commonly used with the <table> , <td> , and <th> elements


  • border to set the properties of the border of a table.
  • padding to set the amount of space between the border of a table cell and its content — this property is very important to make tables easier to read.
  • Properties to change text and fonts.
  • text - align to align writing to the left, right, or center of a cell.
  • vertical - align to align writing to the top, middle, or bottom of a cell.
  • width to set the width of a table or cell.
  • height to set the height of a cell (often used on a row as well).
  • background - color to change the background color of a table or cell.
  • background - image to add an image to the background of a table or cell.

You should be aware that, apart from the background - color and height properties, it is best to avoid using these properties with <tr> elements, as browser support for these properties on rows is not as good as it is for individual cells.


	      	body {color:#000000; background-color:#ffffff;}
			h1 {font-size:18pt;}
			p {font-size:12pt;}
			table {
			background-color:#efefef;
			width:350px;
			border-style:solid;
			border-width:1px;
			border-color:#999999;
			font-family:arial, verdana, sans-serif;}
			caption {
			font-weight:bold;
			text-align:left;
			border-style:solid; border-width:1px; border-color:#666666;
			color:#666666;}
			th {
			height:50px;
			font-weight:bold;
			text-align:left;
			background-color:#cccccc;}
			td, th {padding:5px;}
			td.code {
			width:150px;
			font-family:courier, courier-new, serif;
			font-weight:bold;
			text-align:right;
			vertical-align:top;}
	      

Table - Specific Properties


name Description
border - collapse Where the borders of two table cells touch, this property indicates whether both borders should be visible, or whether the browser should pick just one of the borders to show.
border - spacing Specifies the width of the space that should appear between table cells.
caption - side Specifies which side of a table the caption should appear on.
empty - cells Specifies whether the border should be shown if a cell is empty.
table - layout If the space you have allocated for a table is not enough to fit the contents, browsers will often increase the size of the table to fit the content in — this property can force a table to use the dimensions you specify.

The border - collapse Property


Where two table cells meet, you can tell the browser to show just one of the borders (rather than both — which is the default behavior). You can do this using the border - collapse property.


name Description
collapse Horizontal borders will be collapsed and vertical borders will abut one another
separate Separate rules are observed. This value opens up additional properties to give you further control.

		  	table.one {border-collapse:collapse;}
			table.two {border-collapse:separate;}
			td.a {border-style:dotted; border-width:3px; border-color:#000000;
			padding:10px;}
			td.b {border-style:solid; border-width:3px; border-color:#333333;
			padding:10px;}
		  

If you do not specify that the borders should be collapsed, then two further properties control border


  • border - spacing
  • empty - cells

The border - spacing Property


The border - spacing property specifies the distance that separates adjacent cells ’ borders. If you provide one value, it will apply to both vertical and horizontal borders:


table.one {border-spacing:15px;}

Or you can specify two values, in which case the first refers to the horizontal spacing and the second to the vertical spacing:


table.two {border-spacing:2px 4px;}

The empty - cells Property


The empty - cells property indicates whether a cell without any content should have a border displayed. It can take one of three values


name Description
show Borders will be shown even if the cell is empty (this is the default value).
hide Borders will be hidden if cell is empty.
inherit Borders will obey the rules of the containing table (only of use in nested tables).

		  	<table>
			<tr>
			<th> </th>
			<th> Title one </th>
			<th> Title two </th>
			</tr>
			<tr>
			<th> Row Title </th>
			<td> value </td>
			<td> value </td>
			</tr>
			<tr>
			<th> Row Title </th>
			<td> value </td>
			<td> </td>
			</tr>
			</table>
		  
			---------------
			table {
			width:350px;
			border-collapse:separate;
			empty-cells:hide;}
			td {padding:5px;
			border-style:solid;
			border-width:1px;
			border-color:#999999;}
		  

The caption - side Property


The caption - side property is for use with the <caption> element to indicate on which side of the table the caption should go.


name Description
top The caption will appear above the table (the default).
right The caption will appear to the right of the table.
bottom The caption will appear below the table.
left The caption will appear on the left side of the table.

caption {caption-side:bottom}

The table - layout Property


When you specify a width for a table or table cell, but the content does not fit into the space you have allowed, a browser can give the table more space to fit the content. The table - layout property allows you to force the browser to stick to the widths you specify, even if this makes the content unreadable.


name Description
auto The browser looks through the entire table for the widest unbreakable content in the cells. This is slower at rendering, but more useful if you do not know the exact size of each column. This is the default value.
fixed The width of a table cell only depends on the widths you specified for the table and its cells. This speeds up rendering.
inherit Will obey the rules of the containing table (only of use in nested tables).