Table is a useful HTML element to display data in tabular form using column headings and data cell. CSS Table properties can be applied to make tables more presentable. It allows you to stylize tables in a web page.
You can change layout of the table, control space between cells of the table, define the position of captions or manage table borders. You can use the CSS BORDER properties to manage the outer borders of a table.
Caption Side
CAPTION-SIDE property allows you to define the required position of the caption of the table. This positioning is with respect to the box of the table. The values allowed are right, left, top (default) and bottom. This CSS table property is supported only in IE.
{CAPTION-SIDE:left|right|top|bottom;}
CSS Table Layout
TABLE-LAYOUT property allows you to define the layout of the table. The table can stretch as per the content added in the cells or remain fixed in column widths. The values allowed are fixed, auto(default), and inherit. The inherit value will apply the layout of the container table of a table.
{TABLE-LAYOUT:auto|fixed|inherit;}
Border Collapse
By default the cells of the table are separated by blank space. BORDER-COLLAPSE CSS Table property is used to allow or inhibit this space between table cells. The table can stretch as per the content added in the cells or remain fixed in column widths. The values allowed are collapse and separate (default).
{BORDER-COLLAPSE:separate|collapse;}
Border Spacing
BORDER-SPACING CSS Table property is used to increase or decrease the blank space between table cells. The values allowed are the length of this separation between cells defined in pixels or percentage. The percentage value is that of the box containing the table element. This CSS Table property can also be used to set the border spacing of individual cells by defining it in <TD> tag. If this property is set for the <TABLE> tag it will be applied globally to the calls of a table
{BORDER-SPACING:length in pixels|length in %;}
Empty Cells
If a table contains cells without contents, its borders are not drawn. If you want to draw the borders of the empty cells then use EMPTY-CELLS CSS Table property. The values allowed are show and hide
{EMPTY-CELLS:hide|show;}
Example
<HTML>
<STYLE>
table, th, td {
border: 1px solid blue;
}
</STYLE>
<BODY>
<TABLE style="TABLE-LAYOUT:fixed;"><TR><TD>Name</TD><TD>Roll No</TD><TD>Class</TD><TD>Address</TD></TR>
<TR><TD>Roy Vaughan</TD><TD>17272838</TD><TD>Masters in Computer Science</TD><TD>any random address value is given here</TD></TR>
</TABLE>
<BR><BR>
<TABLE style="width:25%;TABLE-LAYOUT:auto;"><TR><TD>Name</TD><TD>Roll No</TD><TD>Class</TD><TD>Address</TD></TR>
<TR><TD>Roy Vaughan</TD><TD>17272838</TD><TD>Masters in Computer Science</TD><TD>any random address value is given here</TD></TR>
</TABLE>
<BR><BR>
<TABLE style="border-collapse:collapse;"><TR><TD>Name</TD><TD>Roll No</TD><TD>Class</TD><TD>Address</TD></TR>
<TR><TD>Roy Vaughan</TD><TD>17272838</TD><TD>Masters in Computer Science</TD><TD>any random address value is given here</TD></TR>
</TABLE>
<BR><BR>
<TABLE style="border-spacing:10px;"><TR><TD>Name</TD><TD>Roll No</TD><TD>Class</TD><TD>Address</TD></TR>
<TR><TD>Roy Vaughan</TD><TD>17272838</TD><TD>Masters in Computer Science</TD><TD>any random address value is given here</TD></TR>
</TABLE>
<BR><BR>
<TABLE style="empty-cells:show;"><TR><TD>Name</TD><TD>Roll No</TD><TD>Class</TD><TD>Address</TD></TR>
<TR><TD>Roy Vaughan</TD><TD></TD><TD></TD><TD>any random address value is given here</TD></TR>
</TABLE>
<BR><BR>
<TABLE style="empty-cells:hide;"><TR><TD>Name</TD><TD>Roll No</TD><TD>Class</TD><TD>Address</TD></TR>
<TR><TD>Roy Vaughan</TD><TD></TD><TD></TD><TD>any random address value is given here</TD></TR>
</TABLE>
</BODY>
</HTML>