Build A Simple Table in HTML
This html for beginners postcwill guide you on building a simple table format in html document.
Overview
This basic HTML guide for beginners will explain how you can make tables in html document for various use cases.
Introduction
In today's post, I will guide you on creating a simple table to make a database for 5 coding languages and their respective names.
Code
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: solid red;
}
</style>
<body>
<h2>Table tutorial</h2>
<table style=”width:100%”>
<tr>
<th>lang1</th>
<th>lang2</th>
<th>lang3</th>
<th>lang4</th>
<th>lang5</th>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>JavaScript</td>
<td>Node.js</td>
<td>Python</td>
</tr>
</table>
</body>
</html>Explanation
table tag <table></table>
The table tag serves as a container for holding the rows and columns and headings of the table content.
td tag <td></td>
The td tag helps to hold the data values in the table. For example in the above table, the td tags hold the values of the data for programming languages that is, html,css,JavaScript,Nodejs, and Python as shown above in the table.
The td tag serves as a place to hold the data of the table content.
th tag <th></th>
The th tag holds the heading of the table content and for the above table , lang1,lang2,lang3,lang4 and lang5 are the values to ne contained in the th tags.
tr tag <tr></tr>
the tr tag is for creating the rows for the table content. in the above table it's clear that we jave created two rows, one for the heading and the second one for holdint the data values. You can create any number of rows for your table.
Finished look
Conclusion
You have now learnt how to create a simple Table in HTML. In my next week's post, I will explain to you how to make a bit more complicated table in HTML using an example.
More HTML reads
