HTML Table:

A table in HTML consists of table cells inside rows and columns. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example:

        

            

                
Firstname
                
Lastname
                
Age
            
            

                
Priya
                
Sharma
                
24
            
            

                
Arun
                
Singh
                
32
            
        
    

Table Border:

A border is set using the CSS border property. If you do not specify a border for the table, it will be displayed without borders.

Example:

OUTPUT: (Your table with borders)

Border Collapse:

By using the property border-collapse, we can get a single-bordered table.

Border Style:

With the border-style property, you can set the style of the border. The following values are allowed: dotted, dashed, solid, double.

Border Color:

With the border-color property, you can set the color of the border.

Border Radius:

With the border-radius property, the borders get rounded corners.

Example:

OUTPUT: (Your styled table with rounded borders)

Table Size:

Use the style attribute with the width or height properties to specify the size of a table, row, or column.

Example:

        

            

                
Firstname
                
Lastname
                
Age
            
            

                
Jill
                
Smith
                
50
            
        
    

OUTPUT: (Your table with specified size)

Table Cell Padding:

Cell padding is the space between the cell edges and the cell content. To add padding on table cells, use the CSS padding property.

Table Cell Spacing:

Cell spacing is the space between each cell. To change the space between table cells, use the CSS border-spacing property on the table element.

Example:

OUTPUT: (Your table with cell padding and spacing)

Table Colspan:

To make a cell span over multiple columns, use the colspan attribute.

Table Rowspan:

To make a cell span over multiple rows, use the rowspan attribute.

Example:

        

            

                
Name
                
Age
            
            

                
Jill
                
Smith
                
43
            
        
    

OUTPUT: (Your table with colspan and rowspan)

Table Styling:

Table Zebra Stripes:

If you add a background color to every other table row, you will get a nice zebra stripes effect.

Table Vertical Zebra Stripes:

To make vertical zebra stripes, style every other column instead of every other row.

Horizontal Dividers:

If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.

Hoverable Table:

Use the :hover selector on tr to highlight