CSS Table

The HTML table represents data in tabular form. CSS table provides different 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.Followings 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

      
         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.

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

      
         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.

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

General Syntax

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

Source Code

      
         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

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS