HTML Table full Tutorial.
HTML TUTORIAL (PART-8)
HTML Table full Tutorial
HTML Table is used to represent and displayed data in tabular form. It is composed of rows and columns of cell that contain the data.
HTML table is a arrangement of data in rows and columns it make beautiful our webpages and more understandable data in tabular form.
In HTML the table element defines as <table>.
List of Table Element and Functions
| Element |
Function |
| <table> | It is the main element of table; it defines the table in HTML. |
| <thead> | It is used to defines a table header. |
| <tbody> | It is used to define a whole table body. |
| <tfoot> | It is defining a table footer. |
| <th> | It is used to defines a table header. |
| <td> | It is used to define a table data and table cell. |
| <caption> | It defines a caption of a table. |
| <col> | It specifies columns properties for each column in a colgroup. It is a empty element. |
| <colgroup> | It is used to specifies a group of one or more columns in a table. |
List of HTML Table Attributes.
| Attributes |
Functions |
| colspan | It defines how many columns in a cell span. |
| rowspan | It is defining how many rows in a cell span, it also works in <th> attribute. |
| align | It defines the alignment of the table. |
| border | It defines the size of the whole table frame. |
| bgcolor | It defines the background colour of the table. |
| frame | It defines to displayed which side of frame in table. |
| width | It defines the width of table. |
| rules | It defines where rules appear in the table. |
| summary | It summarizes the content of table and defines and alternative text. |
| cellspacing | It defines space between the two cell. |
| cellpadding | It defines the space between the content of a cell and its border. |
Simple Table Example,
<!--Example of Table, codding by
Shubham(StudyMuch)-->
<!DOCTYPE
html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
  <title>studmuch.in</title>
</head>
<body>
  <table>
  <thead>
    <tr>
     <th>First Name</th>
     <th>Last Name</th>
    </tr>
    </thead>
     <tbody>
       <tr>
      <td>Shubham</td>
      <td>Verma</td>
       </tr>
     </tbody>
     <tfoot>
       <tr>
      <td>Mahid</td>
      <td>Sinha</td>
       </tr>
     </tfoot>
  </table>
</ody>
</html>
|
Output of above Example.
|
The example above contains internal styling.
Example of Table Border, Cell Spacing and Cell Padding.
<!--Example of Table, codding by
Shubham(StudyMuch)-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>studmuch.in</title>
<style type="text/css">
 table, td { border: 2px
slid black;
 border-spacing: 4px;}
td{ padding: 5px; }
</style>
</head>
<body>
  <table>
  <thead>
    <tr>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Nationalaty</th>
    </tr>
  </thead>
   <tbody>
    <tr>
      <td>Deepak</td>
      <td>Verma</td>
      <td>Indian</td>
    </tr>
  </tbody>
   <tfoot>
    <tr>
      <td>Akash</td>
      <td>Verma</td>
      <td>Indian</td>
       </tr>
     </tfoot>
  </table>
</body>
</html>
|
Output of above Example.
|
First Name |
Last Name |
Nationality |
| Deepak | Verma | Indian |
| Akash | Verma | Indian |
Table Example with styling, such as Table Colgroup, Width, Border and Background colour.
<!--Example of Table, codding by
Shubham(StudyMuch)-->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible"
content="IE=edge">
 <meta name="viewport"
content="width=device-width,
initial-scale=1.0">
 <title>studmuch.in</title>
</head>
<body>
<table style="background-color
:whitesmoke; width: 50%; margin:0
auto; border: 2px solid black;">
 <colgroup>
 <col style="background-color:
coral;">
 <col style="background-color:
burlywood;">
 <col style="background-color:
cornflowerblue;">
</colgroup>
  <thead>
    <tr>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Nationalaty</th>
    </tr>
  </thead>
   <tbody>
    <tr>
      <td>Shubham</td>
      <td>Verma</td>
      <td>Indian</td>
     </tr>
  </tbody>
   <tfoot>
     <tr>
      <td>Mahid</td>
      <td>Sinha</td>
      <td>Indian</td>
     </tr>
   </tfoot>
 </table>
</body>
</html>
|
Output of above Example.
 |
Callspacing HTML Table Border.
To collspacing table border in one border we need to use style property such as “border-collapse” of the table for value “collapse” i.e. “border-collapse: , “collapse”.
Example of HTML Table “Collapsed Border and Colspan”
<!--Example of Table, codding by
Shubham(StudyMuch)-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Table</title>
<style type="text/css">
table, th, td {
 border-collapse: collapse;
 border:1px solid black ;  }
 </style>
</head>
<body>
<table>
 <thead>
  <tr>
  <th colspan="3">Student Detail</th>
  </tr>
  <tr>
   <th>First Name</th>
   <th>Last Name</th>
    <th>Nationalaty</th>
  </tr>
</thead>
 <tbody>
  <tr>
   <td>Devdutt</td>
   <td>Kumar</td>
   <td>Indian</td>
  </tr>
 </tbody>
  <tfoot>
   <tr>
    <td>Ayush</td>
    <td>Kumar</td>
    <td>Indian</td>
   </tr>
   <tr>
    <td>Anup</td>
    <td>Kumar</td>
    <td>Indian</td>
     </tr>
   </tfoot>
 </table>
</body>
</html>
|
Output of above colspan Example.
|
|||||||||||||||
Example of Table Collapsed Border and Rowspan, and also used all style in this example.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta https-equiv="X-UA-Compatible" content="IE=edge"> Â <meta name="viewport" content="width=device-width, initial-scale=1.0"> Â <title>Exercise Table</title> Â <style type="text/css"> table, th, td { border-collapse: collapse; border: 1px solid black} Â </style> </head> <body> <table style="background- color:ivory;"> <thead bgcolor="lightgreen"> <tr bgcolor="lightpink"> <th colspan="2">Students Detail</th> </tr> <tr> Â Â <th>First Name</th> Â Â Â <th>Last Name</th> </tr> Â </thead> <tbody align="center", bgcolor="yellow"> <tr> Â <td>Shubham</td> Â <td rowspan="4">Verma</td> </tr> <tr> Â <td>Nikhil</td> </tr> <tr> Â <td>Akash</td> </tr> Â <tr> Â <td>Deepak</td> </tr> <tr> Â <td>Devdutt</td> Â <td>Kumar</td> Â </tr> Â Â Â </tbody> </table> </html> |
Output of above Example.
| Students Detail | |
| First Name |
Last Name |
| Shubham |
Verma |
| Nikhil | |
| Akash | |
| Deepak | |
| Devdutt |
Kumar |
In above example you can see rowspain and colspain both, here the four row are rowspain and two column are colpain.
In this you learned all the elements and attributes of HTML Table and also see all types of programming examples, I hope you learned this tutorial well and understand all the programming examples. you can also copy our programming code of HTML Table for educational purpose only.
Also Learn This
25 Comments
zoritoler imol · July 2, 2022 at 4:31 am
Just want to say your article is as astonishing. The clarity in your post is simply excellent and i can assume you are an expert on this subject. Well with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please keep up the gratifying work.
gralion torile · August 27, 2022 at 7:52 am
I’m extremely impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it is rare to see a nice blog like this one nowadays..
zoritoler imol · November 5, 2022 at 6:45 pm
fantastic post, very informative. I wonder why the other specialists of this sector don’t notice this. You must continue your writing. I’m sure, you’ve a huge readers’ base already!
political news · November 20, 2022 at 7:28 pm
I?ve recently started a website, the information you offer on this website has helped me greatly. Thanks for all of your time & work.
zoritoler imol · November 30, 2022 at 9:28 am
My brother recommended I would possibly like this website. He used to be totally right. This publish actually made my day. You cann’t consider just how much time I had spent for this info! Thanks!
Scrap Car Removal Vancouver · January 13, 2023 at 8:39 pm
Thanks , I have just been searching for information about this topic for ages and yours is the best I have discovered so far. But, what about the bottom line? Are you sure about the source?
EBV treatments · January 21, 2023 at 2:37 am
I just like the helpful info you supply on your articles. I will bookmark your blog and test once more right here frequently. I’m fairly certain I?ll be told a lot of new stuff proper here! Best of luck for the following!
best bitcoin casinos · January 21, 2023 at 10:58 am
Something more important is that when looking for a good on the web electronics shop, look for web shops that are constantly updated, retaining up-to-date with the hottest products, the perfect deals, and helpful information on product or service. This will ensure you are getting through a shop which stays on top of the competition and provide you things to make knowledgeable, well-informed electronics buys. Thanks for the significant tips I have learned from your blog.
Gallery Dept Hoodie · January 22, 2023 at 2:45 pm
What?s Happening i’m new to this, I stumbled upon this I have found It absolutely helpful and it has helped me out loads. I hope to contribute & aid other users like its aided me. Good job.
cheap flight tickets · January 23, 2023 at 1:53 pm
Would you be keen on exchanging links?
Druiprek kopen · January 24, 2023 at 8:39 pm
hello!,I like your writing so much! share we communicate more about your article on AOL? I need an expert on this area to solve my problem. May be that’s you! Looking forward to see you.
red boost · February 3, 2023 at 2:33 am
I have fun with, cause I discovered exactly what I used to be looking for. You’ve ended my four day lengthy hunt! God Bless you man. Have a great day. Bye
pro dentim · February 9, 2023 at 11:17 am
okmark your blog and check again here regularly. I’m quite certain I will learn plenty of new stuff right here! Good luck for the next!
accountant · February 15, 2023 at 7:45 am
Someone essentially help to make seriously articles I would state. This is the first time I frequented your website page and thus far? I amazed with the research you made to make this particular publish incredible. Wonderful job!
Jame Marsden · February 17, 2023 at 8:18 am
That is the precise blog for anybody who wants to search out out about this topic. You notice so much its nearly exhausting to argue with you (not that I really would need?HaHa). You positively put a new spin on a topic thats been written about for years. Nice stuff, simply nice!
Kuwait Construction materials · February 19, 2023 at 1:44 pm
whoah this blog is wonderful i love reading your articles. Keep up the great work! You know, many people are searching around for this info, you can help them greatly.
Zwarte Komijn · March 10, 2023 at 10:45 am
Great site. A lot of useful information here. I am sending it to some friends ans also sharing in delicious. And naturally, thanks for your effort!
bokep indo terbaru · March 18, 2023 at 9:58 pm
Thanks for discussing your ideas in this article. The other factor is that if a problem takes place with a laptop or computer motherboard, people should not take the risk associated with repairing it themselves for if it is not done right it can lead to permanent damage to an entire laptop. Most commonly it is safe to approach the dealer of any laptop for the repair of that motherboard. They have technicians that have an competence in dealing with notebook motherboard complications and can make right diagnosis and carry out repairs.
gin rummy card game · March 19, 2023 at 3:46 am
Valuable information. Lucky me I found your site by chance, and I am shocked why this twist of fate did not took place in advance! I bookmarked it.
iso agent program · May 16, 2023 at 7:15 pm
Thanks for your write-up. One other thing is the fact that individual states have their own laws that affect property owners, which makes it quite hard for the our lawmakers to come up with a fresh set of rules concerning foreclosure on property owners. The problem is that each state has got own regulations which may have impact in an adverse manner when it comes to foreclosure policies.
SR555 · May 17, 2023 at 12:26 pm
Hello my friend! I want to say that this post is awesome, nice written and include approximately all important infos. I would like to see more posts like this.
Reformas de salud · May 18, 2023 at 6:08 pm
It?s laborious to seek out educated people on this topic, but you sound like you recognize what you?re talking about! Thanks
Odor eliminators · May 20, 2023 at 8:21 am
Hi my friend! I wish to say that this article is awesome, nice written and include approximately all important infos. I?d like to see more posts like this.
gateio hangi ülkenin · May 23, 2023 at 3:04 am
This article opened my eyes, I can feel your mood, your thoughts, it seems very wonderful. I hope to see more articles like this. thanks for sharing.
link bokep · May 24, 2023 at 9:47 am
Thanks for expressing your ideas. I would also like to say that video games have been ever evolving. Modern technology and inventions have aided create reasonable and enjoyable games. These kind of entertainment games were not actually sensible when the concept was first of all being tried. Just like other styles of technological innovation, video games too have had to evolve by means of many ages. This itself is testimony to the fast growth of video games.