To create a table in HTML we use <table> tag.
As you know table is a combination of rows and columns, so to create rows in table we use <tr> tags and to define the table header we use <th> tag. <td> tag is used for defining the table data or you can say table cell.
The <td> elements contains the data of the table. They can have all sorts of HTML elements such as; text, images, lists, etc.
Let’s have a look at basic example:
We created a table with 100% width and then used <tr> tag to create a row and then we added table heading in it by using <th> tag. We created 2 more rows and inserted data by using <td> tags. Let’s check the output of the code.
As you can see in the output window we have our table but it looks a kind of weird let’s add some border around the table and also align text.
You can see a little change in the <table> tag, I have used text-align property to make the text alignment center and to give the border to the table border property is used. Let’s check the output of the code.
Now let’s talk about COLSPAN and ROWSPAN, you can span any row and column by any number let’s check the code it will give you the idea.
Let's have a look at the output of the code.
In the output we have 3 columns and as you can see 1st cell of 1st row is covering the space of 2 rows. The reason is we used “rowspan” property in <td> tag.
Now let’s have a look at 3rd row cell 1 it is covering the space of 3 columns that’s because we are using “colspan”.
You can change the background of a table with any color or any image. Here we have two tables one with color and other with image.
OUTPUT
Background Image
OUTPUT
As you can in 1st case we changed the background color by using bgcolor and border color by using bordercolor property. If you want to add image just replace bgcolor property with background and give the location of image which you want as your table back.
That’s it for today if you have any questions you can comment below or you can mail us. Just keep doing practice.