how to design table in html

Designing table in HTML is a great thing that makes your information look more pretty and tidy.

First of all, we are going to create our table then we will add our touch on it.

Example:

<table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Mohammed</td>
      <td>Qandeel</td>
      <td>Jordan</td>
    </tr>
    <tr>
      <td>Mikdam</td>
      <td>Qandeel</td>
      <td>Jordan</td>
    </tr>
    <tr>
      <td>Khaled</td>
      <td>Mustafa</td>
      <td>Egypt</td>
    </tr>
  </table>

Output:

First Name	Last Name	Country
Mohammed	Qandeel	Jordan
Mikdam	Qandeel	Jordan
Khaled	Mustafa	Egypt

 

Then, There is a lot of styles you can add to your table, let's start with adding some borders and set the width for 400px.

Example:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  width:400px;
}

Output:

Then let's add some padding and make the text-align center:

Example:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  width:400px;
  padding: 15px;
  text-align: center;
}

Output:

For zebra-striped tables, add a background-color for all even or odd table rows with the nth-child() selector:

Example:

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

Output:

And there are a lot and a lot of styles you can add to your table in HTML.

---

answer Link