CSS Tables

❮ Prev Next ❯

Tables in the past were greatly overused in CSS, as they were one of the only ways we could create a fancy page layout.

Today with Grid and Flexbox we can move tables back to the job they were intended to do: styling tables.

Let's start from the HTML. This is a basic table: 

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="col">Muhammad</td>
      <td>24</td>
    </tr>
    <tr>
      <td scope="col">Ahmad</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

By default it's not very attractive. The browser provides some standard styles, if you want to see just copy and paste the above code in any text editor or use our online one.

We can use CSS to style all the elements of the table, of course.

Let's start with the border. A nice border can go a long way.

We can apply it on the tableelement, and on the inner elements too, like th and td:

Example: 


table, th, td {
  border : border: 1px solid #333;
}

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      table, th, td {
        border: 1px solid #333;
      } 
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
      <h3>welcome to Coding Koleji </h3>
    <table>
      <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
      </tr>
      </thead>
      <tbody>
        <tr>
          <td scope="col">Muhammad</td>
          <td>24</td>
        </tr>
        <tr>
          <td scope="col">Ahmad</td>
          <td>30</td>
        </tr>
      </tbody>
    </table>
    </body>
  </html>

One common thing with tables is the ability to add a color to one row, and a different color to another row. This is possible using the :nth-child(odd)or :nth-child(even) selector:

Example: 


tbody tr:nth-child(odd) {
  background-color :  #af47ff;
}

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      tbody tr:nth-child(odd) {
        background-color : #af47ff;
      } 

      table, th, td {
        border: 1px solid #333;
      } 
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
      <h3>welcome to Coding Koleji </h3>
    <table>
      <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
      </tr>
      </thead>
      <tbody>
        <tr>
          <td scope="col">Muhammad</td>
          <td>24</td>
        </tr>
        <tr>
          <td scope="col">Ahmad</td>
          <td>30</td>
        </tr>
      </tbody>
    </table>
    </body>
  </html>

If you add border-collapse: collapse;to the table element, all borders are collapsed into one:

Example: 


tbody tr:nth-child(odd) {
  background-color :  #af47ff;
}

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      tbody tr:nth-child(odd) {
        background-color : #af47ff;
      } 

      table, th, td {
        border: 1px solid #333;
      } 
      
      table {
        border-collapse : collapse;
      } 
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
      <h3>welcome to Coding Koleji </h3>
    <table>
      <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
      </tr>
      </thead>
      <tbody>
        <tr>
          <td scope="col">Muhammad</td>
          <td>24</td>
        </tr>
        <tr>
          <td scope="col">Ahmad</td>
          <td>30</td>
        </tr>
      </tbody>
    </table>
    </body>
  </html>

we can not show you how to style everything but atlease by demonstrating some keys you can be able to do what ever you want.

❮ Prev Next ❯