Border Attributes

In HTML, you have some limited with what you can do with tables, and a table border. Like most attributes in CSS, the border attributes allow us more control over how a table is displayed.

Border-Collapse

Border-Collapse has two values that can be passed to it. Those values are collapse and separate. This controls if the table has one or two borders that are standard in HTML. Here is an example.

As you can see the table with the attribute set to separate, has two borders. One for the cell and one for the table itself. Where as the table with the attribute set to collapse only has one border, which is just for the cells only.

Border-Spacing

Border-Spacing allows you to control the space between the cell and table border. If you set the border-collapse value to collapse, then this attribute will have no effect. You set the value of this attribute with any CSS form of measurement.

Caption-Side

One of the less used HTML tags for tables is the caption tag. This allows you to add a caption to the table. In HTML, you can use the align attribute to determine what side of the table that the caption should be shown on. In HTML 4.01, it is suggested that the align attribute should not be used. Instead, the designer should use the caption-side CSS attribute. The values that this attribute can be set to are top, bottom, left, and right. Each value corresponds to the side of the table that it references.

Empty-Cells

In HTML, when you wanted to display an empty cell you would either have to make an empty cell or use   to create an empty cell. This cell would show up you would not be able to do so. With the empty-cells attribute you can now display the border around empty cells. The attribute has only two values that can be passed to it, they are hide, and show. Show will show the border around empty cells, and hide will not display the borders.

Table-Layout

Table-layout determines how a table is displayed. The values that can be passed to this attribute are fixed and automatic. Below is how the two different values work according to the W3C School website.

Fixed table layout: The fixed table layout allows the browser to lay out the table faster than the automatic table layout In a fixed table layout, the horizontal layout only depends on the table's width, the width of the columns, and not the content of the cells By using fixed table layout, the user agent can begin to display the table once the entire first row has been received

Automatic table layout: In an automatic table layout, the column width is set by the widest unbreakable content in the column cells This algorithm is sometimes slow since it needs to access all the content in the table before