CSS Tables

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 :

 

Result:

 

Striped Tables

 

Result:

Responsive Table:
A responsive table will display a horizontal scroll bar if the screen is too

small to display the full content. Resize the browser window to see the effect

CODE:

 

Result:

CSS Table Properties:

 

You may also like: CSS Outline

 

 

 

Leave a Comment

Your email address will not be published.