HTML Tables
Hello everyone and welcome to the another tutorial of HTML, in this blog I will teach you about HTML Tables. Before we hop in to it, lets see what is table means in HTML, imagine you want to write a daily routine for yourself what you do? probably you would draw some columns and rows then you write the timelines in the start of the columns and use rows to specify the work you should do in that timeline. The chart that you have created is a simple table, we could do the same thing in HTML Tables, we could create better charts like Excel charts, let me put it in this way tables are really similar to Excel.
Before we head to the coding section, make sure that you have the visual studio code installed and you have download and installed the Live server extension (if not click on the button down below).
Simple Table
In order to create HTML Tables you should understand the code I have written down below, so I will explain it, table is the first tag that we use which tells the sever or VSC that we are creating a table. Then we use “tr” acronym of table row in this case our first row is table’s header, because of that we use “th”(stands for table header) in header we write our timeline, then we create another row and use table data (td), now we can type our tasks in it. keep in mind first “td” goes under first “th” second “td” goes under second “th” and so on. If you write this code you would see that your table is on the top left of screen but in the picture it is in the center of screen, there is nothing wrong with your code, I have used some CSS code to center the result in screen (for you to see it better).
<!--Simple Table-->
<table>
<tr>
<th>Morning</th>
<th>Afternoon</th>
<th>Evening</th>
</tr>
<tr>
<td>Study</td>
<td>Programming</td>
<td>Play game</td>
</tr>
</table>
Better Table
Now that you know the fundamentals of the HTML Tables, it’s time for you to make better table, before you look at the code down below and get scared by it, let me tell you that there is nothing scary about this code and when you understand it, it gets really easy to write. We use “thead” and “tbody” tags to help the engines out, in this way engine would know where the body of table and where the header of table starts and finishes, we use “scope” to make sure that engine would know that this table head is column (col) or row (row). In order to help engines to understand that we are referring to timeline we use tag named time and “datetime”, The only visual difference this table has with the previous one is, we have column and row table head (that’s all).
<!--Better Table-->
<table>
<thead>
<tr>
<th>Day/Time</th>
<th scope="col">
<time datetime="8:00">8 A.M</time>
</th>
<th scope="col">
<time datetime="1:00">1 P.M</time>
</th>
<th scope="col">
<time datetime="4:00">4 P.M</time>
</th>
<th scope="col">
<time datetime="8:00">8 P.M</time>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Monday</th>
<td>Breakfast</td>
<td>Lunch</td>
<td>Workout</td>
<td>Study</td>
</tr>
<tr>
<th scope="row">Tuesrsday</th>
<td>Work</td>
<td>Cdoing</td>
<td>Watch TV</td>
<td>Sleep</td>
</tr>
</tbody>
</table>
