CSS Tables

CSS Tables: We can apply style on HTML tables for better look and feel. There are some CSS properties that are widely used in designing table using CSS:

The look of an HTML table can be greatly improved with CSS:

Table Borders

To specify table borders in CSS, use the border property.

The example beneath specifies a black border for <table>, <th>, and <td> elements:

Add a border to a table:

Firstname Lastname
Sohail Khan
Haroon Khan

Example

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

<h2>Add a border to a table:</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
  </tr>
</table>

</body>
</html>

Full-Width Table

The table above may appear to be small in some cases. In the event that you need a table that should span the whole screen (full-width), add width: 100% to the <table> element:

Full-width Table

Firstname Lastname
Sohail Khan
Haroon Khan

Example

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

table {
  width: 100%;
}
</style>
</head>
<body>

<h2>Full-width Table</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
  </tr>
</table>

</body>
</html>

Double Borders

Notice that the table in the examples above have double borders. This is on the grounds that both the table and the <th> and <td> elements have separate borders.

To eliminate double borders, take a look at the example underneath.


Collapse Table Borders

The border-collapse property sets whether the table borders ought to be collapsed into a single border:

Let the borders collapse

Firstname Lastname
Sohail Khan
Haroon Khan

Example

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

table {
  width: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Let the borders collapse</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
  </tr>
</table>

</body>
</html>

On the off chance that you just want a border around the table, just specify the border property for <table>:

Single Border Around The Table

Firstname Lastname
Sohail Khan
Haroon Khan

Example

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

<h2>Single Border Around The Table</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
  </tr>
</table>

</body>
</html>

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder