CSS HTML Javascript jQuery Ajax PHP Example Java MORE

CSS table

If we create a table in HTML without adding any CSS then the browser show the table without any border.
By using CSS we can significatly imporve the look and feel of a table.

Table Border:

To add a border in table CSS border property is used.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Deo</td>
  </tr>
  <tr>
    <td>Lewis</td>
    <td>Deo</td>
  </tr>
</table>

</body>
</html>

Run it yourself

The border-collapse property is used to collapse the border into a single border.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Deo</td>
  </tr>
  <tr>
    <td>Lewis</td>
    <td>Deo</td>
  </tr>
</table>

</body>
</html>

Run it yourself

Table Height & Width By using the height and width property we can change the height and width of a table.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 40px;
}

</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Roll No</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Divya</td>
    <td>001</td>
    <td>Mumbai</td>
  </tr>
  <tr>
    <td>Hritika</td>
    <td>002</td>
    <td>Pune</td>
  </tr>
  
</table>

</body>
</html>

Run it yourself

Adjusting Space inside Tables

By default, the browser creates the table cells just large enough to contain the data in the cells. To add custom space around the content in the table cells the CSS padding property is used.

<!DOCTYPE html>
<html>
<head>
<style>
    table {
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid black;
    }
    th, td {
        padding: 10px;
    }
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Roll No</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Divya</td>
    <td>001</td>
    <td>Mumbai</td>
  </tr>
  <tr>
    <td>Hritika</td>
    <td>002</td>
    <td>Pune</td>
  </tr>
  
</table>

</body>
</html>

Run it yourself

Horizontal Alignment

The text-align property is used to sets the horizontal alignment (like left, right, or center) of the content in <th> or <td> <tr>

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.left {
  text-align: left;
}
.right {
  text-align: right;
}
</style>
</head>
<body>

<table>
  <tr>
  <th class="left">Firstname</th>
  <th>Lastname</th>
  <th class="right">Savings</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td class="right">$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td class="right">$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td class="right">$300</td>
  </tr>

  <td>Cleveland</td>
  <td>Brown</td>
  <td class="right">$250</td>
</tr>
</table>

</body>
</html>

Run it yourself

Vertical Alignment

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


<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.bottom_align {
  height: 50px;
  vertical-align: bottom;
}
.top_align {
  height: 50px;
  vertical-align: top;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Roll No</th>
    <th>City</th>
  </tr>
  <tr>
    <td class="bottom_align">Divya</td>
    <td class="bottom_align">001</td>
    <td class="bottom_align">Mumbai</td>
  </tr>
  <tr>
    <td class="top_align">Hritika</td>
    <td class="top_align">002</td>
    <td class="top_align">Pune</td>
  </tr>
  
</table>

</body>
</html>

Run it yourself

Table Color

We can add background color and text color to a table.


<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid grey;
}

th, td {
  text-align: left;
  padding: 8px;
}

th {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<h2>Colored Table Header</h2>

<table>
  <tr>
    <th>Name</th>
    <th>Roll No</th>
    <th>City</th>
  </tr>
  <tr>
    <td class="bottom_align">Divya</td>
    <td class="bottom_align">001</td>
    <td class="bottom_align">Mumbai</td>
  </tr>
  <tr>
    <td class="top_align">Hritika</td>
    <td class="top_align">002</td>
    <td class="top_align">Pune</td>
  </tr>
  
</table>

</body>
</html>

Run it yourself

If we create a table in HTML without adding any CSS then the browser show the table without any border.

By using CSS we can significatly imporve the look and feel of a table.

Table Border:

To add a border in table CSS border property is used.


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Deo</td>
  </tr>
  <tr>
    <td>Lewis</td>
    <td>Deo</td>
  </tr>
</table>

</body>
</html>


Run it yourself

The border-collapse property is used to collapse the border into a single border.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Deo</td>
  </tr>
  <tr>
    <td>Lewis</td>
    <td>Deo</td>
  </tr>
</table>

</body>
</html>


Run it yourself

Table Height & Width By using the height and width property we can change the height and width of a table.

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 40px;
}

</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Roll No</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Divya</td>
    <td>001</td>
    <td>Mumbai</td>
  </tr>
  <tr>
    <td>Hritika</td>
    <td>002</td>
    <td>Pune</td>
  </tr>
  
</table>

</body>
</html>


Run it yourself

Adjusting Space inside Tables

By default, the browser creates the table cells just large enough to contain the data in the cells. To add custom space around the content in the table cells the CSS padding property is used.

<!DOCTYPE html>
<html>
<head>
<style>
    table {
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid black;
    }
    th, td {
        padding: 10px;
    }
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Roll No</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Divya</td>
    <td>001</td>
    <td>Mumbai</td>
  </tr>
  <tr>
    <td>Hritika</td>
    <td>002</td>
    <td>Pune</td>
  </tr>
  
</table>

</body>
</html>


Run it yourself

Horizontal Alignment The text-align property is used to sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.left {
  text-align: left;
}
.right {
  text-align: right;
}
</style>
</head>
<body>

<table>
  <tr>
  <th class="left">Firstname</th>
  <th>Lastname</th>
  <th class="right">Savings</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td class="right">$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td class="right">$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td class="right">$300</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td class="right">$250</td>
</tr>
</table>

</body>
</html>

Run it yourself

Vertical Alignment

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

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.bottom_align {
  height: 50px;
  vertical-align: bottom;
}
.top_align {
  height: 50px;
  vertical-align: top;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Roll No</th>
    <th>City</th>
  </tr>
  <tr>
    <td class="bottom_align">Divya</td>
    <td class="bottom_align">001</td>
    <td class="bottom_align">Mumbai</td>
  </tr>
  <tr>
    <td class="top_align">Hritika</td>
    <td class="top_align">002</td>
    <td class="top_align">Pune</td>
  </tr>
  
</table>

</body>
</html>

Run it yourself

Table Color

We can add background color and text color to a table.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid grey;
}

th, td {
  text-align: left;
  padding: 8px;
}

th {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<h2>Colored Table Header</h2>

<table>
  <tr>
    <th>Name</th>
    <th>Roll No</th>
    <th>City</th>
  </tr>
  <tr>
    <td class="bottom_align">Divya</td>
    <td class="bottom_align">001</td>
    <td class="bottom_align">Mumbai</td>
  </tr>
  <tr>
    <td class="top_align">Hritika</td>
    <td class="top_align">002</td>
    <td class="top_align">Pune</td>
  </tr>
  
</table>

</body>
</html>

Run it yourself