Hey guys!! Welcome to flower brackets blog. Hope you are doing well. In today’s post you will learn how to add tables in html.
Example: Add Tables In Html
I have an html file here,
<!DOCTYPE html> <html> <head> <title>Add Tables In Html</title> </head> <body> <h2>Tables In Html</h2> <table> <tr> <th>Country</th> <th>Currency</th> <th>Capital</th> </tr> <tr> <td>USA</td> <td>US Dollar</td> <td>Washington, D.C.</td> </tr> <tr> <td>United Kingdom</td> <td>Pound sterling</td> <td>London</td> </tr> <tr> <td>India</td> <td>Rupee</td> <td>New Delhi</td> </tr> </table> </body> </html>
As you can see above the body section has opening and closing <h2> heading tags that enclose “Tables In Html”.
I have the “table” element and this is the first time we are using it. Before I talk about the rest of the elements in the above html document let me show you how it looks in google chrome,
So this is how the file would look. As you can see above, a table like we made.
Let us see how we can improve above table by having border and some space between the cells and all that.
But the output what we got you know is a very basic table. It has a country, currency and capital as the headings for the three columns.
And it has four rows in total. The first row has the table headers and then there are three rows that contain data.
Let me go back to the html document. So to have a table in web page you have to use a table element.
Right, so you type in “table” between opening and closing angular brackets. There’s a corresponding closing table tag.
In between the opening and closing table tags you have the opening and closing <tr> tags for each row in your table.
As I showed you the how it looks in google chrome there are four rows in the table. There has to be a four sets of <tr> tag.
<tr> is a short form for table row. Then to have the table headers you have to use the <th> tag.
<th> is a short form for table header. Generally you would want to have table headers in the first row of the table.
That’s why in the first set of opening and closing <tr> tags we have three sets of <th> and the closing <th> tags.
Also Read – Definition Lists In Html
Country is the first header, currency is the second header and capital is the third header. So these are column headers for the table.
Then for the other rows you have to use the <td> as you know sort of to have cell values in your tables.
In the second row I have “USA” as my value for the first column. So that’s why I have opening <td> tag and closing <td> tag.
Next I want to have “US dollar” as the value for the second column. So that’s why I have opening <td> tag and closing <td> tag.
So on and so forth you have to just add in the opening and closing <tr> tags and between those you have to add in the opening and closing <td> tags to include the cell values.
Let’s say you want to add a border to the above table. It’s very simple all you have to do is just type in like this,
<table border = "2px">
Save the file and refresh the browser,
There you go your table now has a border and it looks good. But as you can see the values in the first column are stuffed pretty much towards the left.
You would want to have some space between the values and the border of the table.
So the way you can have that space is by using the cellpadding attribute for the table element.
Just type like this,
<table border = "2px" cellpadding = "5px">
Save the file and go to google chrome and refresh,
Now you can see that each value is you know sort of separated from the surrounding walls of the cells by at least five pixels.
Next let’s say you also want some space between the cells. So you know in the second row particularly we see that it seems a little crowded.
Because you have long values here “United Kingdom” and “Pound sterling” both long values.
So if you want to have space between the cells you have to use the cellspacing attribute of the table element like this,
<table border = "2px" cellpadding = "5px" cellspacing = "5px">
Save the file and refresh the browser,
I see that there is space between each cell. Also you can have different colors for different rows to sort of enhance the readability and the look of the table.
So that’s it about how to add tables in html. I hope you guys have understood the concept. You may subscribe to my blog if you have not already.