How to Create Table in HTML – Learn HTML From Beginning Step by Step
Whenever we have to display some data’s or multiple values, we use table to display because it gives better interface to show them. For creating table in html we use html table tag, you know in any table there are two things – rows and columns. Inside the table we have to create rows and columns then fill values on it. Working with html table tag is easy only if you understand basic syntax of html otherwise it may be difficult. Its my suggestion to rad my some of the previous related post:
Now I am going to start my tutorial on html table tag, In table instead of saying rows and columns we used to say table row “tr” and table data “td”. Top of the heading we say table heading “th”, if we wish to show the value as a heading. So For creating table you will use three tags:
Table – To define html that you are going to create table inside the browser using <table> tag.
Table Row – Inside table we have to insert rows so that we fill the data values on it using <tr> tag.
Table Data or Value – Inside the rows we have to insert data, which we want to display to users using <td> tag.
HTML Table Example:
If I have to create table to display above item then I will write html table code like this:
<td> Whatsapp No </td>
This is the basic structure of creating table in html. Now you can also customize more to change look of table from normal to attractive using font tag, text style, colors, table border, adding images, adding multimedia content, etc.
Table Border Tag:
If you want to add border in the table then you have to use border tag inside the table tag like this:
<table border =”5”>
Insert Image in table:
If you wish to show images inside the rows then you have to add img src tag inside the table row and also you have to set width & height of image to show in browser otherwise it will take default size. You can add image in table like this:
<td> <img src=”Image-Location-Address” width=”200” height=”200”></td>
Here you have to change Image-Location-Address with the path where Image is stored and set the width & height whatever size you wish to display.
You can also watch below html table video tutorial in Hindi to understand above codes:
HTML Table Heading Tag
This tag use to define the table heading using th tag instead of first td tag. When you use this tag, the output of this tag will show whatever you have written inside this code should be automatically in bold format. For using this tag you just have to replace first <td> with <th>. Below you can see the example:
<th> First Name </th>
<th> Last Name </th>
Here if you save this code in notepad and run in browser then you will see “First Name” & “Last Name” is in bold size without using bold font tag.
HTML Table Background Color:
If you want to change background color of table in html then you have to use “bgcolor” tag inside the table tag, like this:
Here I have set background color as red, so it will show red in background of table. You can change color as per your requirements.
HTML table width:
If you wish to change the width of table from default to as per requirements so you will use width tag inside the table tag:
<table width =”1000”>
Here I have set width of table should be 1000 pixel; you can change as per your requirements.
HTML Table Alignment:
By default table display to left side of the screen. You can also set the alignments of table, which side of the screen you want to show the tables like: left, right or centre. You can use align tag to do this inside the table tag, Like this:
Here I have set alignment of table should be in centre, you can also change the alignment as per your requirements.
Note: Here the spelling of centre should be center, however the spelling of centre is different in English, but Html doesn’t recognize it.
HTML table heading background colour:
You can also change the colour of complete data cell or columns backgrounds, for this also you have to use bgcolor tag inside the td tag or th tag, Like this:
HTML table data background colour:
You can also change the colour of a particular cell or data background, For this also you have to use bgcolor tag inside the td tag, Like this:
HTML Table Cells Height & Width Setting:
You can also set width and height of table cells by using width and height tag inside the th, td or tr, Whom you wish to change the width or height. Like this:
For Table Heading: <th width=”100” height=”100”> Hello </th>
For Table Data: <td width=”100” height=”100”> Hello </th>
HTML Table Cell spacing:
You can give proper space between two cells using cellspacing tag inside the table tag, You can use cellspacing in html Like this:
Here you can change value from 10 to your required number.
HTML Table Cell padding:
You can also give space between cells, and inside text or anything, cell padding generate spaces between your cell border to its inside values. You can use cellpadding in html like this:
Here you can change value from 5 to your required number.
Now I hope you understood how to create table in html, customisation in table to change look of table. I am writing a complete html table code so that you will understand each and every thing which I have mentioned above:
<head> <title> HTML Table </title> </head>
<b><font size=”5″ face=”Segoe Print” color=”red”><center>Sign Up Form Table Data </center></font></b>
<table border=”5″ bgcolor=”pink” width=”1000″ align=”center” cellspacing=”2″ cellpadding=”2″>
<th width=”100″ height=”100″> First Name </th>
<th width=”100″> Last Name </th>
<th width=”100″> Email Address </th>
<th >Mobile Number </th>
<th > Date of birth</th>
<th > Gender</th>
<th > Website</th>
<td> Kumar </td>
<td> firstname.lastname@example.org </td>
<td> 10th Nov 1998</td>
<td><img src=”image/1 (1).jpg” width=”150″ height=”100″> </td>
<td bgcolor=”red”>ram1234 </td>
<td> Kumar </td>
<td> email@example.com </td>
<td> 9th Dec 1998</td>
<td><img src=”image/1 (2).jpg” width=”150″ height=”100″> </td>
<td bgcolor=”red”>hellokiran </td>
Please copy the above code and paste into notepad file then save with any name like “table.html” but make sure you are using html or html extension after name, as I have given the example. Then open saved file into browser and check the output, Make sure you are getting output like this:
If you still have any issue on understanding html table code then please watch this html table hindi video.
Now I hope you understand how to use table tag to create table in browser, table tag is one of the frequent use tag especially in web designing. So try to learn as much as possible and if you have any query or you would like to add something then please comment below.