CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS table properties

With CSS table properties, you can set how tables and table columns should be displayed.

This tutorial focuses on:

Setting the border of a table

A table border is set using the border-collapse property. This property takes the value "collapse" to specify that a table border should appear for all cells or the value "separate" to specify that a table border should appear detached.

NOTE: This property only sets whether a tables border is collapsed or not. It does not set the borders size or color.

Example:
<table border="2" width="94%" style="border-collapse: collapse;"> <tr> <td>This table</td> <td>has the <b>border-collapse</b></td> </tr> <tr> <td>property</td> <td>set to "collapse"</td> </tr> </table> <table border="2" width="94%" style="border-collapse: separate;"> <tr> <td>This table</td> <td>has the <b>border-collapse</b></td> </tr> <tr> <td>property</td> <td>set to "separate"</td> </tr> </table>
Output:
This table has the border-collapse
property set to "collapse"
This table has the border-collapse
property set to "separate"

Setting the space between cell borders

The spacing between borders of cells is set using the border-spacing property.

Example:
<table border="2" width="94%" style="border-spacing: 5px;"> <tr> <td>This table</td> <td>has a</td> </tr> <tr> <td>border spacing</td> <td>of 5px</td> </tr> </table>
Output:
This table has a
border spacing of 5px

Setting the position of a table caption

The position of a table caption is set with the caption-side property. This property can take a value of "top", "bottom", "left", or "right"

Example:
<table border="2" width="94%" style="caption-side: bottom;"> <caption>Hello, I am a table caption</caption> <tr> <td>This table</td> <td>has a</td> </tr> <tr> <td>caption at the</td> <td>bottom of it</td> </tr> </table>
Output:
Hello, I am a table caption
This table has a
caption at the bottom of it

Setting the visibility of empty cells

Sometimes you will have empty cells in a table. You can set whether or not these empty cells are visible using the empty-cells property. This property takes the value of "show" to display empty cells or "hide" to hide empty cells.

Example:
<table border="2" width="94%" style="empty-cells: show;"> <tr> <td>This table</td> <td>shows</td> </tr> <tr> <td>empty cells</td> <td></td> </tr> </table>
Output:
This table shows
empty cells

Setting the method of display for table cells, rows, and columns

The method of display for table cells, rows, and columns is set using the table-layout property. This property can take the value "auto" for an automatic table layout where the width of columns is set according to the width of the widest column or "fixed" for a fixed table where the width of columns is set according to the browser.

Example:
<table border="2" width="94%" style="table-layout: auto;"> <tr> <td>This table</td> <td>has a</td> </tr> <tr> <td>table-layout</td> <td>of auto. Auto!!!!!</td> </tr> </table>
Output:
This table has a
table-layout of auto. Auto!!!!!
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information