How to Create CSS Tables Easily

Creating HTML Table can be a pain in the Brain. Sometimes It creates double borders and sometimes it goes out of the box. Here In this article we will use the minimum CSS and will create a Beautiful CSS Table with just a few lines of code.

Add this HTML:

<table class="joshua">
<thead>
  <tr>
    <th>Name</th>
    <th>Category</th>
    <th>Year</th>
  </tr>
</thead>
<tbody>
<tr>
  <td>The Shawshank Redemption</td>
  <td>Drama</td>
  <td>1994</td>
</tr>
<tr>
  <td>Inception</td>
  <td>Sci-Fi</td>
  <td>2010</td>
</tr>
<tr>
  <td>Pulp Fiction</td>
  <td>Crime</td>
  <td>1994</td>
</tr>
<tr>
  <td>The Dark Knight</td>
  <td>Action</td>
  <td>2008</td>
</tr>
<tr>
  <td>Forrest Gump</td>
  <td>Drama</td>
  <td>1994</td>
</tr>
<tr>
  <td>The Matrix</td>
  <td>Sci-Fi</td>
  <td>1999</td>
</tr>
<tr>
  <td>Schindler's List</td>
  <td>Biography</td>
  <td>1993</td>
</tr>
<tr>
  <td>Fight Club</td>
  <td>Drama</td>
  <td>1999</td>
</tr>
<tr>
  <td>The Lord of the Rings: The Fellowship of the Ring</td>
  <td>Fantasy</td>
  <td>2001</td>
</tr>
<tr>
  <td>Goodfellas</td>
  <td>Crime</td>
  <td>1990</td>
</tr>
</tbody>
</table>

Add this CSS:

.joshua {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.joshua td, .joshua th {
  border: 1px solid #ddd;
  padding: 8px;
}

.joshua th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #064adb;
  color: white;
  text-align: center;
}

You have successfully created a Table. If you have any doubt. Leave the comments below. Thank you!