The following specific table styling properties can be used to control how a table is rendered by the browser:

Property Description Value
border-collapse ¬†Specifies whether borders are collapsed into a single border or separated into separate borders collapse 



border-spacing *note: ONLY applies to separated cells, see above 

Specifies the distance between borders of adjacent cells


Single value set both horizontal and vertical spacing

Two values specify horizontal then vertical spacing

Cannot use negative values

User defined
empty-cells Specifies if border should be shown if cell is empty hide 



table-layout Specifies the table layout algorithm auto 





<!DOCTYPE html>
		<title>My Document Title</title>
		<style type="text/css">
			* {font: 12px Arial ;}
			table { border-collapse:separate; border-spacing:5px 10px; empty-cells:hide; table-Layout:auto; }
			table, thead, tfoot, th, td { border: solid 1px #33d; }
			th, td { padding:5px; }
			thead, tfoot { background-color:#393; color:white; text-align:center; }
			<caption>This is the table caption</caption>
					<td colspan="4">The table heading goes here.</td>
					<td colspan="4">The table footer goes here.</td>
					<th>Column 1 heading</th>
					<th>Column 2 heading</th>
					<th>Column 3 heading</th>
					<th>Column 4 heading</th>
					<td>data 1</td>
					<td>data 2</td>
					<td>data 4</td>
					<td>data 5</td>
					<td>data 6</td>
					<td>data 7</td>
					<td>data 8</td>

Save & refresh browser:




Table cells, rows and columns have no margins, only padding.


vertical-align sets the vertical position of cell contents.

*note: see the Text vertical-align table for details of values for this property)

Leave a Reply