MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • AFFILIATE MARKETING
    • LeadsArk
  • MORE
    • MAKE MONEY
      • ONLINE BUSINESS
      • ADSENSE
      • AFFILIATE MARKETING
    • BLOGGING
      • SEO
      • BlogSpot
      • WORPRESS
      • GOOGLE
      • COMPUTER TIPS
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DEVELOPMENT
      • PHP
      • WORDPRESS
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Monday, December 3, 2018

How to use Table Tag in HTML?

 MyBlogHelp     December 03, 2018     html     1 comment   


You can use tables to render data in the structured form. By adding tables to your webpage, you can make it even more structured and attractive. To create tables in HTML, you use <table> tags. This tag has a sub tag called <tr> table row tag. <tr> tag also has a sub tag called <td> table data tag.
Any table is made of row and columns. Therefore, to create a row after <table> tag, you use <tr> tag. The more you want to create the rows, define the same <tr> tag.

After creating rows you create columns in rows. The <td> tag is used to create columns. You define as many tags as you want to create <td> tags.


Creating Tables in HTML

To create a table, you should always keep in mind the tag order. First comes the <table> tag. After this comes the <tr> tag. Then there comes <th> and <td> tags. <th> and <td> tags will always come in <tr> tags.

<table> -  define a table
<tr> - define a table row
<td> - define a table data
<th> - define a table heading
<caption> - define a table caption

        There is an example of a table structure as below.   


  
The above script generates the webpage as below.



html-table-structure


One thing you should keep in mind is that unless you define the border of the table through the border attribute, the boundary of the table will not display.

Creating Table Headings

You can also create headings in the first row of tables. The heading is bigger than the rest of the text of the table. For example, if you are creating a table that stores information about employees, you can create headings such as Name, age, address and contact no. etc.

The <th> tag is used to create heading. This is called a table heading tag. The text you use in this tag is shown on the webpage as a heading. This tag is used inside the <tr> tag. An example of this is being given below.


      
After running the given script, webpage will generate as below.



html-table-heading

Table Attribute 

     There are two types of attributes here.

              1. COLSPAN:-  attribute to make a cell span with many columns
              2. ROWSPAN:-  attribute to make a cell span with many rows

COLSPAN Attribute

If you want to divide the column of one row in more than one column. For this, you define colspan attribute in the previous column. In which column you define the colspan, it replaces the same column of one column. An example of this is being given below.


          
See above example, Eve has pass 2 mobile numbers but Michal has only one mobile number. If you normally create a table, then a column in the Michal row will be left empty. In such a way the table will not look good. Such as you can see in the John row, there is a column which is empty because there is no calspan define.

If you want to have two columns of the row with one column in the row, then you will have to use "colspan" attribute. As I have covered two columns of the row with Michal. This script generates the output as below.



html-table-colspan-attribute


ROWSPAN Attribute

ROWSPAN attribute is also like a colspan. You define it in the <tr> tag. The value you give for this attribute replaces with the number of rows into one row. Example of this attribute is given as below.



The above script will give the output as below.



html-table-rowspan-attribute

Naming the Table

If you want to give a name of the table, you will have to use the <caption> tag for this. It is defined after the <table> tag. An example is given below.



The above script will generate the given web page.



html-table-caption-tag


Hopefully, this "HTML Tutorial - Table” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips. 


Previous:- How to use Anchor Tag in HTML?        Next:- How to use Image Tag in HTML?
















  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

1 comment:

  1. Arya SteveApril 3, 2020 at 6:13 PM

    I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.website designing United States

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Blog Archive

  • ►  2020 (4)
    • ►  October (1)
    • ►  September (1)
    • ►  August (2)
  • ►  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ►  March (6)
    • ►  February (3)
    • ►  January (16)
  • ▼  2018 (54)
    • ▼  December (27)
      • How to use html5 nav tag?
      • How to install Google Fonts on your Blogger Blog?
      • How to use section tag in html5?
      • How to use meter tag in html5?
      • How to use time tag in html5?
      • How to use header tag in HTML5?
      • How to use figure tag in html5?
      • How to use aside tag in html5?
      • How to use details Tag in HTML5?
      • How to use wbr tag in html5?
      • How to use article tag in HTML 5 ?
      • How to use menu tag in html?
      • How to use base tag in HTML?
      • How to use HTML hr and br Tag?
      • How to use HTML address tag?
      • How to use HTML Meta Tags?
      • How to use HTML script & noscript Tag?
      • How to use DOCTYPE declaration in HTML?
      • How to use Form Tag in HTML?
      • How to use Block and Inline Tags in HTML?
      • How to use Lists in HTML?
      • How to use Image Tag in HTML?
      • How to use Table Tag in HTML?
      • How to use anchor Tag in HTML?
      • How to Format & Style in HTML?
      • How to use Heading in HTML?
      • What is Attribute in HTML?
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ►  January (10)
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use the main tag in html5?
  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.

Featured Post

LeadArk - Affiliate Marketing | Qualified Organic Lead Generation | LeadsArk Review

Copyright © MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
Design by Md. Abdussamad | MyBlogHelp.com