CSS Tables Property

Collapse Table Borders

  • The border-collapse property sets the double table border into a single border.
Example
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {  
    border: 2px solid green;  
    border-collapse: collapse;  
} 
</style>
</head>
<body>
<h2>Table Borders Collapse</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

CSS Table Width and Height Property

  • Using Width set the width of table and using height property is set to the height of a table.
Example
<!DOCTYPE>
<html>
<head>
<style>
table, td, th {
  border: 2px solid green;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  height: 100px;
}
td {
   height: 50px;
}
</style>
</head>
<body>
<h2>Table Width and Height</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

Horizontal Alignment

  •  Using text-align property to set the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

Note:- By default, the <th> contents are center-aligned and the content of <td> elements are left-aligned.

Example
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  text-align: left;
}
</style>
</head>
<body>
<h2>The Use of text-align Property</h2>
<table>
    <tr>
    <th>Full Name</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>Ravi Kumar </td>
    <td>O Level</td>
  </tr>
  <tr>
    <td>Sunil Singh</td>
    <td>A Level</td>
  </tr>
</tr>
</table>
</body>
</html>

Vertical Alignment

  • The vertical-align property is use to sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

Note:- The by default, the vertical alignment of the content in(for both <th> and <td> elements) a table is middle .

Example
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid green;
}
table {
  border-collapse: collapse;
  width: 50%;
}
td {
  height: 40px;
  vertical-align: bottom;
}
</style>
</head>
<body>
<h2>The vertical-align Property</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

CSS Table Padding Property

  • It is used to set the space between the border and the content in a table.
Example
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {  
    border: 1px solid red;  
    border-collapse: collapse;  
}  
th, td {
    padding: 20px;
}
</style>
</head>
<body>
<h2>The Table Padding Property</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

CSS Table Horizontal Dividers Property

  • Using the border-bottom property to set the Horizontal Dividers for <th> and <td> elements.
Example
<!DOCTYPE>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 10px;
  text-align: center;
  border-top: 1px solid green;
}
</style>
</head>
<body>
<h2>Horizontal Dividers</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

CSS Table Hoverable Property

  • By use the :hover selector on <tr> or <td> to highlight table rows and cell on mouse over.
Example
<!DOCTYPE>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 10px;
  text-align: left;
  border: 1px solid red;
}
tr:hover {background-color: green;}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Tannu</td>
    <td>Pandey</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Sonu</td>
    <td>Patel</td>
    <td>450</td>
  </tr>
  <tr>
    <td>Rakesh</td>
    <td>Kumar</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>Singh</td>
    <td>450</td>
  </tr>
</table>
</body>
</html>

CSS Striped Table Property

  • If you want to the zebra-striped tables, you use the nth-child() selector and add a background-color to all even (or odd) table rows.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 10px;
}
tr:nth-child(even) {background-color: #8cabdb;}
tr:nth-child(odd) {background-color: #e0d5e6;}
</style>
</head>
<body>
<h2>Use of Striped Table</h2>
<table>
  <tr>
    <th>Sr No</th>
    <th>Full Name</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Ravi Kumar</td>
    <td>O Level</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Sunil Singh</td>
    <td>B Level</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Geeta Devi</td>
    <td>A Level</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Devi Prasad</td>
    <td>C Level</td>
  </tr>
</table>
</body>
</html>

CSS Responsive Table Property

  •  If you want to a responsive table will display a horizontal scroll bar to Add a container element (like <div>) with overflow-x: auto around the <table> element to make it auto responsive table.
Example
<!DOCTYPE>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 10px;
}
tr:nth-child(even) {background-color: #b8d6c7;}
</style>
</head>
<body>
<h2>Use of Responsive Table</h2>
<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Sr No.</th>
      <th>Full Name</th>
      <th>Class</th>
      <th>Subject 1</th>
      <th>Subject 2</th>
      <th>Subject 3</th>
      <th>Subject 4</th>
      <th>Subject 5</th>
      <th>Subject 6</th>
      <th>Subject 7</th>
      <th>Subject 8</th>
      <th>Subject 9</th>
      <th>Subject 10</th>
      <th>Subject 11</th>
      <th>Subject 12</th>
      <th>Subject 13</th>
      <th>Subject 14</th>
      <th>Subject 15</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Geeta Devi</td>
      <td>O Level</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
      <tr>
      <td>1</td>
      <td>Geeta Devi</td>
      <td>O Level</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
      <tr>
      <td>1</td>
      <td>Geeta Devi</td>
      <td>O Level</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
      <tr>
      <td>1</td>
      <td>Geeta Devi</td>
      <td>O Level</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
  </table>
</div>
</body>
</html>
English Hindi