Styling Tables with CSS

The HTML table represents data in tabular form.CSS provides different table properties that improve the representation of tables.

Adding Border To The Table

To provide table border use CSS border property.

CSS table property is used to beautify HTML table.Folowings are the CSS table properties like border, border-collapse,width & height,etc.

Let us see its general syntax-

  General Syntax

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

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

Note: In this example, the CSS border property has been used to provide the border of the table.

The CSS border-collapse property of the table has been used to collapse the table border.

  General Syntax

    table {
 border-collapse: collapse;
}

th,
td {
 border: 1px solid black;
}      

table {
 border-collapse: collapse;
}

th,
td {
 border: 1px solid black;
}

Note: In this example, CSS border & border-collapse property has been used to make HTML table more elegant.

Table width and height can be set by CSS table width and height property.

  General Syntax

    table {
 width: 100%;
}
th {
 height: 40px;
}      

table {
 width: 100%;
}

th {
 height: 40px;
}

Note: In this example, CSS width & hight property has been used to give HTML <table> width and height.

CSS Frameworks Materialize CSS Pure CSS UiKit CSS Bulma CSS