CSS Table Tutorials

These tutorials will show you how to control the layout of tables with CSS.

Control the Table Width

Tables expand and contract automatically to accommodate the data that is contained within the table by default. If more data is added to the table, the table continues to expand as long as there is space available.

The "table-layout" property allows you to control the width of the table.

The possible values for the table-layout property are: auto, fixed with the initial value being auto.

Tables expand only enough for the data that is within the table to fit within the table, this is the same as the "table-layout: auto" property and value pair.

The code below creates a table.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> table { margin: 5px; padding: 0; } </style> <html> <body> <table> <tr> <td> My Cars </td> <td> Year </td> </tr> <tr> <td> Honda Accord </td> <td> 1992 </td> </tr> <td> Toyota Corrola </td> <td> 2009 </td> </tr> </table> </body> </html>

The code above produces the table below.

My Cars Year
Honda Accord 1992
Toyota Corrola 2009

The code below creates a table exactly like the one above, only with more content within the table.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> table { margin: 5px; padding: 0; } </style> <html> <body> <table> <tr> <td> My Cars </td> <td> Year </td> </tr> <tr> <td> Honda Accord </td> <td> nineteen ninety two </td> </tr> <td> Toyota Corrola </td> <td> two thousand and nine </td> </tr> </table> </body> </html>

The code above creates the table below.

My Cars Year
Honda Accord nineteen ninety two
Toyota Corrola two thousand and nine

The code below applies the "table-layout: auto" property and value pair to the table that is created.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> table { table-layout: auto; margin: 5px; padding: 0; } </style> <html> <body> <table> <tr> <td> My Cars </td> <td> Year </td> </tr> <tr> <td> Honda Accord </td> <td> 1992 </td> </tr> <td> Toyota Corrola </td> <td> 2009 </td> </tr> </table> </body> </html>

The code above produces the table below.

My Cars Year
Honda Accord 1992
Toyota Corrola 2009

The code below applies the "table-layout: fixed" property and value pair to the table that is created.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> table { table-layout: fixed; width: 500px; margin: 5px; padding: 0; } </style> <html> <body> <table> <tr> <td> My Cars </td> <td> Year </td> </tr> <tr> <td> Honda Accord </td> <td> 1992 </td> </tr> <td> Toyota Corrola </td> <td> 2009 </td> </tr> </table> </body> </html>

The code above creates the table below.

My Cars Year
Honda Accord 1992
Toyota Corrola 2009

Controlling Cell Spacing in Tables

Tables include some spacing between each of the cells that appear in the table by default. CSS allows you to keep specify the spacing between the cells or to remove the spacing between each cell with the "border-collapse" property.

The border-collapse property has 2 possible values: collapse and seperate, with seperate value being the initial value.

The code below shows you how to apply the "border-collapse: collapse" property and value pair to remove the spacing between table cells.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> table { border-collapse: collapse; margin: 5px; padding: 0; } </style> <html> <body> <table> <tr> <td> My Cars </td> <td> Year </td> </tr> <tr> <td> Honda Accord </td> <td> 1992 </td> </tr> <td> Toyota Corrola </td> <td> 2009 </td> </tr> </table> </body> </html>

The code above creates the table below.

My Cars Year
Honda Accord 1992
Toyota Corrola 2009

The code below shows you how to apply the "border-collapse: seperate" property and value pair.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> table { border-collapse: seperate; margin: 5px; padding: 0; } </style> <html> <body> <table> <tr> <td> My Cars </td> <td> Year </td> </tr> <tr> <td> Honda Accord </td> <td> 1992 </td> </tr> <td> Toyota Corrola </td> <td> 2009 </td> </tr> </table> </body> </html>

The code above creates the table below.

My Cars Year
Honda Accord 1992
Toyota Corrola 2009

Web Hosting Resources

Free Website Templates