Tables are very important visualization part of the web. They are used to display information in a summarized format like soccer scores, restaurant menus, etc. To understand how tables are used, lets analyze the code snippet below (focus on code inside the body element)
See the Pen Tables by bmutebi (@bmutebi) on CodePen.
To come up with a table, we start with the <table>. The opening tag for table has a border attribute with a value of 1—this attribute is optional and is for the border you see around the table in the output window. If not included, the borders won’t be there.
Inside the <table> element, we start with a table row i.e. <tr>. When coming up with tables, we start with rows. After putting a row, we put a column in form of a table dimension inside that row i.e. <td>. Lets simplify this more with a new code snippet
<table border="1">
<tr>
<td>8am - 10am</td>
<td>10am - 12pm</td>
</tr>
</table>In the above snippet, we created a table using the <table> element. Then we created a row inside that table using a <tr> element. After we break down the created row into dimension using the <td>. We are confident to say that the table above has got one row with two columns.
This is how a basic table is created in HTML. We can have other elements like <th> in HTML to show table headings rather than using <td> . Check out the second table in the first code snippet. We can also do the merging of cells in the HTML.
Play around with the code in the first snippet for guidance. Enjoy your time of creating tabes 🥰.
