CSS - Table Style Tutorial

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

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.

    
   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.