Login With Github

CSS Tables

We mainly use the <table> element to present data in HTML. The table properties in CSS can greatly improve the appearance of the table.

Table Borders

If you want the table to show a border, you can use the border property. Here is an example to set a blue border for table, th, and td:

table, th, td {
    border: 1px solid blue;
}

Note that the table in the above example has a double line border. This is due to the elements of table, th and td each has a separate border. You can use the border-collapse property, if you want to set the border of the table to be a single line border.

Collapse Table Borders

You can use the border-collapse property to set the table border to be a single line border or a double border. For example, you can use the border-collapse property to change the double border of the table to be a single border in the above example: 

table {
    border-collapse:collapse;
}

table,th, td {
    border: 1px solid blue;
}

Width And Height

You can define the width and height of the table with the width and height properties. In the following example, we set the width of the table to 100% and the height of the <th> element to 50px:

table {
    border-collapse:collapse;
    width:100%;
}

th {
    height:50px;
}

Text Alignment

You can use the text-align and vertical-align properties to set the text alignment of the table.

The text-align property is used to set the horizontal alignment, such as left alignment, right alignment, or center alignment:

td {
    text-align:right;
}

Note:The content of the <th> element is center-aligned and left-aligned by default in the table.

The vertical-align property is used to set the vertical alignment, such as top alignment, bottom alignment, or center alignment:

td {
    height:50px;
    vertical-align:bottom;
}

Note: The content of the table is vertically centered by default.

Paddings

If you need to control the distance between the content of the table and the border, you can set the padding property for the <td> element and <th> element.

th, td {
    padding: 15px;
    text-align: left;
}

Colors

You can set the color of the table border, or set the background color for the <th> element and the <td> element. For example:

table {
    border-collapse:collapse;
}

table, td, th {
    border:1px solid green;
}

th {
    background-color:green;
    color:white;
}

Zebra-striped Table

You can use the nth-child() selector to set different background colors for odd and even rows of the table:

table {
    border-collapse:collapse;
}

table, td, th {
    border:1px solid green;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

 

0 Comment

temp