Styling HTML Table Using CSS Table property

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;
}    

Source Code

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

Code Explanation

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

Collapsing Table Borders

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;
}    

Source Code

Download
table {
 border-collapse: collapse;
}

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

Code Explanation

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

HTML Table Width & Height

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

General Syntax

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

Source Code

Download
table {
 width: 100%;
}

th {
 height: 40px;
}

Code Explanation

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

Online Test / Quiz

Our Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
2021-22 © shapeyourpath.com