HTML Tables: Everything You Need to Know
One of the best ways to show information on a webpage is by using an HTML table with headings. Often, you might have come across an elegant table showing information. Web developers create that table using HTML. You can simply create the table using HTML and style it with CSS.
In this article, we’ll explore what HTML tables are and how to create one.
How Does a Table Work?
A table is a logical collection of data that consists of rows and columns (tabular data). In a table, you can quickly search relevant data or relations, such as a person’s age or day of work.
The purpose of a table is to provide rigidity. When we relate things using rows and columns it gets easier to interpret the data. You can add headings to label the information we’re showing there. Tables can have all sorts of information including pictures, links, or simple text.
Since we use HTML to create tables, here is a table tag example.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Joe</td>
<td>42</td>
</tr>
</table>
Table Headers
When using HTML to create tables, we use <th> tag to define the structure of headers. On the other hand, the <tr> tag shows that the row starts from here and ends with </tr>. Here is a simple example:
<table>
<tr>
<th> Employee Code </th>
<th> Employee Name </th>
</tr>
</table>
Now you might wonder what if we have to add a heading to the whole table? In that case, we can simply use <caption> for it.
<table>
<caption>Employee Details</caption>
<tr>
<th> Employee Code </th>
<th> Employee Name </th>
</tr>
<tr>
<td>249</td>
<td>Alice Joe</td>
</tr>
</table>
Table Rows
Table rows are the horizontal way to show information. A row can be a single set of information against an entity. For example, a row can have heading names in each column and a second row may have information against it. The tag used for the row is <tr>
Table Cells
A cell is formed when a column and row intersect. Whenever we insert our data in a table it will be stored or displayed in a cell.
Just for fun: You need at least one column and one row to create one table with one cell.
Define An HTML Table
As we have seen before, an HTML table is defined using the <table></table> tag. It is the basic tag to create the HTML table. To create rows and columns in the table we use a few more tags inside the table tag.
Rows In HTML Table
<tr> tag abbreviated as table row is used to create rows.
HTML Table Th Vs Td
For creating headers, or you can say HTML table with headings, we use <th> tag. And if you wish to create simple table columns in HTML then you can use <td>.
Note: <tr> is written within the <table> tag and <th> or <td> is written within the <tr> tag.
Here is another example code that creates a table using HTML:
<table>
<tr>
<th>Student</th>
<th>Roll no</th>
</tr>
<tr>
<td>Harry</td>
<td>10</td>
</tr>
<tr>
<td>Jimmy</td>
<td>20</td>
</tr>
</table>
Table Styling
When it comes to styling HTML tables, we can do many fun things with them without even using CSS. For now, we’ll look at two methods of styling HTML tables.
Styling Without <Col>
One of the ways to style tables without <col> tag is to use inline styling. For example, if you wish to apply different styles to a row you can apply an inline style to it. Have a look at the code below to understand this concept.
Example:
<table>
<tr>
<th>Height</th>
<th>Player</th>
</tr>
<tr style="background-color:yellow">
<td>Smith</td>
<td>5 feet</td>
</tr>
</table>
You can also simply define style tags and add styling to them for tags. Or for easier access, you can use ids and classes for styling in CSS as well!
Styling With <Col>
<col> allows you to set styling for columns. You can use it to apply styling to multiple columns using just one single line of code. Here is a perfect table tag example with <col> tag.
Example:
<table>
<colgroup>
<col span="2" style="background-color:Green">
<col style="background-color:Orange">
</colgroup>
<tr>
<th>student</th>
<th>Roll no</th>
<th>Class</th>
</tr>
<tr>
<td>Harry</td>
<td>10</td>
<td>4-A</td>
</tr>
<tr>
<td>Jimmy</td>
<td>12</td>
<td>5-B</td>
</tr>
</table>
As you can see above, we have used the first <col> tag to specify the background color for only the first two columns. And the second <col> tag is used for styling the third column.
Also, you can add CSS with <col> tag too for further styling.
Adding A Border To A Table
Have you tried to run any of the above codes in your browser? If yes, then you may be worried that why you can’t see any table borders. Well, don’t worry, because HTML doesn’t show any table borders by default. You’ll have to add borders separately. Adding borders manually gives the advantage to add borders exactly of your choice.
Here is a simple code that will help you add a border to your table.
Tip: It is better to use the <style> tag within the <head> section to apply this code to your table.
Code for border
table, th, td {
border: 2px solid black;
}
This code will display two borders, one for the table square and the other for the columns. If you wish to remove the double border, then just add the following line in your style.
border-collapse: collapse;
How To Add a Caption to HTML Table
Adding a caption to a table in HTML is extremely simple. Just add the <caption></caption> tag immediately after the opening of the <table> tag.
Example
<table>
<caption>Player Heights</caption>
<tr>
<th>Player</th>
<th>Height</th>
</tr>
<tr>
<td>Smith</td>
<td>5 feet</td>
</tr>
</table>
That’s all from our side about HTML tables. But to create an elegant table on the web, you must sharpen your HTML and CSS skills. For that, you can take SoloLearn’s beginner-level courses for HTML and CSS. These courses will give you the perfect head start needed for your web journey. Not only that, but you can test your newly learned skills on this user-friendly web compiler as well!
