how to design table in html
how to design table in html
1 Answer
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