Tutorials
Recommended
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 |