CSS Tutorial – 22 – Table Properties


The table properties are used to set the layout
of a table. They can change whether the table border is
collapsed or separated, and the spacing of that separation.
They can also set which side the table caption is displayed and whether or not empty cells
have any borders. Table-layout choses whether the table width
will expand to fit the content of the table or remain fixed with the set size of the table. The border-collapse property sets whether
the table borders are collapsed into a single border or separated as by default.
If the borders are separate we can use the border spacing property to change the spacing.
We can provide either one value or two. With two length values the first one sets the horizontal
spacing and the second the vertical spacing. Next, if we add a caption to the table we
can use the caption-side property to position the table caption at any side.
The Empty-cells property sets whether or not to show the borders for any empty cells in
the table. Even though the CSS specification says the initial value should be show, both
Firefox and Internet Explorer will hide the empty cells by default. Note, that these three
properties are currently not implemented in the Windows version of Internet Explorer. Lastly, if we set the table to stretch across
only part of the page, and then add content to that cell which is larger than that width,
it will expand the table cell. This is because the table layout by default is set to auto.
If we want to enforce the table size we can set the table layout to fixed. The horizontal
layout will then only depend on the table’s set width, and not the content of the cells.
This also means that a browser can render the table much faster since it will know the
dimension of the table as soon as the first row has been received.

Add a Comment

Your email address will not be published. Required fields are marked *