WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Tables


The look of a HTML table can be incredibly enhanced with CSS:

Name Company Country
K's Merchandise Jennifer G. Valdez UK
Kelly P. Luse Broadcast captioner Rassian
Judy B. Jones Francisco Chang Hungry
Amanda H. Edwards Roland Mendel France
Island Trading Helen Bennett UK
Cindy L. Kerns Philip Cramer UK
Sara C. Grider Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Table Borders

To indicate table outskirts in CSS, utilize the border property.

The model beneath indicates a dark fringe for <table>, <th>, and <td> elements:

Example

table, th, td {
   border: 1px strong black;
}
Try it yourself »

Notice that the table in the model above has twofold fringes. This is since both the table and the <th> and <td> components have separate borders.


Collapse Table Borders

The border-collapse property sets whether the table outskirts ought to be fell into a solitary border:

Example

table {
    fringe breakdown: collapse;
}

table, th, td {
    fringe: 1px strong black;
}
Try it yourself »

If you just need a fringe around the table, just indicate the border property for <table>:

Example

table {
    outskirt: 1px strong black;
}
Try it yourself »

Table Width and Height

Width and tallness of a table are characterized by the width and height properties.

The precedent underneath sets the width of the table to 100%, and the tallness of the <th> components to 50px:

Example

table {
    width: 100%;
}

th {
    tallness: 50px;
}
Try it yourself »

Horizontal Alignment

The text-align property sets the level arrangement (like left, right, or focus) of the substance in <th> or <td>.

By default, the substance of <th> components are focus adjusted and the substance of <td> components are left-aligned.

The following model left-adjusts the content in <th> elements:

Example

th {
    content adjust: left;
}
Try it yourself »

Vertical Alignment

The vertical-align property sets the vertical arrangement (like best, base, or center) of the substance in <th> or <td>.

By default, the vertical arrangement of the substance in a table is center (for both <th> also, <td> elements).

The following precedent sets the vertical content arrangement to base for <td> elements:

Example

td {
    tallness: 50px;
    vertical-adjust: bottom;
}
Try it yourself »

Table Padding

To control the space between the outskirt and the substance in a table, utilize the padding property on <td> and <th> elements:

Example

th, td {
    cushioning: 15px;
    content adjust: left;
}
Try it yourself »

Horizontal Dividers

First Name Last Name Savings
Kathleen McNally $100
Hope McNally $150
Joanne Tate $300

Add the border-bottom property to <th> and <td> for level dividers:

Example

th, td {
    outskirt base: 1px strong #ddd;
}
Try it Yourself »

Hoverable Table

Use the :hover selector on <tr> to feature table columns on mouse over:

First Name Last Name Savings
Kathleen McNally $100
Hope McNally $150
Joanne Tate $300

Example

tr:hover {background-shading: #f5f5f5}

Striped Tables

First Name Last Name Savings
Kathleen McNally $100
Hope McNally $150
Joanne Tate $300

For zebra-striped tables, utilize the nth-child() selector and include a background-color to all even (or odd) table rows:

Example

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

Table Color

The precedent beneath indicates the foundation shading what's more, content shade of <th> elements:

First Name Last Name Savings
Kathleen McNally $100
Hope McNally $150
Joanne Tate $300

Example

th {
    foundation shading: #4CAF50;
    shading: white;
}

Responsive Table

A responsive table will show a level parchment bar if the screen is as well little to show the full content:

First Name Last Name Points Points Points Points Points Points Points Points Points Points Points Points
Joyce Allen 50 50 50 50 50 50 50 50 50 50 50 50
Eve Addam 94 94 94 94 94 94 94 94 94 94 94 94
Lisa Johnson 67 67 67 67 67 67 67 67 67 67 67 67

Add a compartment component (like <div>) with overflow-x:auto around the <table> component to make it responsive:

Example

<div style="overflow-x:auto;">

<table>
... table substance ...
</table>

</div>