{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Table Properties Tutorials

Tables are meant to be used to show the relationship between data, similar to a spreadsheet. Tables are not meant to control the layout of HTML elements, for example, to layout web pages.

CSS table properties allow you to style table borders, set the placement of the table caption, control the layout of the table and also to control the spacing between table cells.

CSS Table Properties

The table properties are listed below.

Property Description Values CSS level
border-collapse Specifies whether or not table borders should be collapsed collapse
seperate
inherit 		CSS level 2
border-spacing Specifies the distance between the borders of adjacent cells length lengt
inherit 		CSS level 2
caption-side Specifies the placement of a table caption top
bottom
inherit 		CSS level 2
empty-cells Specifies whether or not to display borders and background on empty cells in a table hide
show
inherit 		CSS level 2
table-layout Sets the layout algorithm to be used for a table auto
fixed
inherit 		CSS level 2

How To Set the Border of Tables and Table Elements

The border property is used to set the border of tables and table elements (table headings (th) and table cells(td)).

The code example below shows you how to set the border of a table element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> table { border:1px solid black; } </style> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> </tr> <tr> <td>Adam</td> <td>Bryant</td> </tr> <tr> <td>Albert</td> <td>Bill</td> </tr> </table> </body> </html>

The web page that the code example creates is here: CSS Table Properties Example.

Notice that, in the example above, the border only surrounds the table (table) element.

The code example below shows you how to apply a border to the table (table), table heading (th) and table cell (td) elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> table, th, td { border:1px solid black; } </style> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> </tr> <tr> <td>Adam</td> <td>Bryant</td> </tr> <tr> <td>Albert</td> <td>Bill</td> </tr> </table> </body> </html>

The web page that the code example creates is here: CSS Table Properties Example.

How To Collapse Borders

When a border is applied to the table element and also the table heading element and/or the table cell element, as in the table example above, this causes the causes the elements to have seperate borders.

The border-collapse property with a value of collapse is used to display a single border for the table

The code example below shows you how to display a single border for the table and its' table elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> table { border-collapse:seperate; } table, th, td { border:1px solid black; } </style> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> </tr> <tr> <td>Adam</td> <td>Bryant</td> </tr> <tr> <td>Albert</td> <td>Bill</td> </tr> </table> </body> </html>

The web page that the code example creates is here: CSS Table Properties Example.

How To Set Table and Table Elements Width and Height

The width and height of a table and its' table elements are defined by the width and height properties.

The code example below shows you how to set the width and height of a table and its' table elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> table { border-collapse:collapse; } table, td, th { border:1px solid black; } table { width:100%; } th { height:50px; } td { height:25px; } </style> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> </tr> <tr> <td>Adam</td> <td>Bryant</td> </tr> <tr> <td>Albert</td> <td>Bill</td> </tr> </table> </body> </html>

The web page that the code example creates is here: CSS Table Properties Example.

Table Text Alignment

The text-align and vertical-align properties allow you to align text in a table.

The code example below shows you how to align the text within the table using the text-align property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> table { width:100%; border-collapse:collapse; } table,td,th { border:1px solid black; } th { text-align:left; } td { text-align:right; } </style> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> </tr> <tr> <td>Adam</td> <td>Bryant</td> </tr> <tr> <td>Albert</td> <td>Bill</td> </tr> </table> </body> </html>

The web page that the code example creates is here: CSS Table Properties Example.

The code example below shows you how to use the vertical-align property to set the vertical alignment of text within table headings and table cells.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> table { width:100%; border-collapse:collapse; } table,td,th { border:1px solid black; } th { height:100px; text-align:left; vertical-align:top; } td { height:100px; text-align:left; vertical-align:bottom; } </style> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> </tr> <tr> <td>Adam</td> <td>Bryant</td> </tr> <tr> <td>Albert</td> <td>Bill</td> </tr> </table> </body> </html>

The web page that the code example creates is here: CSS Table Properties Example.

Table Element Padding

The padding property is used to control the spacing between the border and the content within table headings (th) and table cells (td).

The code example below shows you how to set the padding within the table headings and table cells.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> table { border-collapse:collapse; } table, td, th { border:1px solid black; } th { padding:20px; } td { padding:0px; } </style> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> </tr> <tr> <td>Adam</td> <td>Bryant</td> </tr> <tr> <td>Albert</td> <td>Bill</td> </tr> </table> </body> </html>

The web page that the code example creates is here: CSS Table Properties Example.

Table Color

CSS allows you to specify the color of the borders, background colors and text of table elements (table headings (th) and table cells (td)).

The code example below shows you how to specify the color of table borders, text and background color of table elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> table { border-collapse:collapse; } table, td, th { border:3px solid blue; color:white; } th { background-color:green; } td { background-color:red; } </style> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> </tr> <tr> <td>Adam</td> <td>Bryant</td> </tr> <tr> <td>Albert</td> <td>Bill</td> </tr> </table> </body> </html>

The web page that the code example creates is here: CSS Table Properties Example.

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends