CSS Tables - Bcis Notes

CSS Tables

The look of an HTML table can be greatly improved with CSS:

CODE:

Result:

Table Borders:
To specify table borders in CSS, use the border property.

CODE:

Result:

This example specifies a black border for <table>, <th>, and <td> elements.

Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single border:

CODE:

Result:

Table Width and Height
The width and height of a table are defined by the width and height properties.

CODE:

Result:

Horizontal Alignment:
The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>. By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

CODE:

Result:

Vertical Alignment:
The vertical-align property sets the vertical alignment (like top, bottom, or middle)of the content in <th> or <td>.By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

CODE:

Result:

Hoverable Table:
Use the: hover selector on <tr> to highlight table rows on mouse over. This property shows the effect over the mouse movement on a particular text inside the table.

CODE :