Mastering HTML Tables: A Comprehensive Guide by techwalebnde

 What is table tags and its attributes in html?

The table tag in html is used to create tables in the webpage where the information is stored in rows and columns, it is one of the most useful elements of the html...

Components of Table tag:

1. TABLE: So if you want to make a table you have to start with <table> tag and ends with </table> tag, everything lies between these tag...
2. ROW: Row is a single group of related data within a table, so to create rows you have to use <tr> tag which contains data and cells.
3. CELLS:A cell is like a box in table where our information is placed in <td> tag(table data) and <th> tag(tableheader), th tag is basically used for headings of the columns of our table....
4. BORDER: A table border is just like an outline for our table which is useful for designing or specifying our table, this comes under the attribute of table But I have already explained this to you so you don't have any problem in understanding the table.

Syntax of Table tag:

Output of Table tag:

Explanation of Syntax:

• <table> tag describes the entire table.
• border describes the border which you have seen in the output.
• <tr> describes the rows of the tables.
• <th> describes the headings of the table like "name","age" that you have seen in the output.

Attributes of Table tag

• Border: Specifies the width of the border around the table and its cells

               <table border="2px solid black">

• Width: Specifies the width of the table as in the form of pixels or as in the form of percentage of the container.

              <table width="10px/50%>

• Cellspacing: Specifies the space between the adjacent cells in the table.

              <table cellspacing="5">

• Cellpadding: Specifies the space between the content of each cell and its border.

            <table cellpadding="10">

• Align: Specifies the alignment of the table but this attribute is outdated according to the newer version of Html-5.

            <table align="center">

• Summary: This attribute describes the description or the summary of the table name.

          <table summary="12th class Marks">

• Border-Collapse: Border collapse attributes specifies how the border between the cells should behave either it should be separated or collapse.

           <table border-collapse="collapse">

Two most important attributes that are commonly used in designing complex tables and many more layouts are rowspan and colspan:

• Rowspan: The rowspan attribute specifies how many rows a table cell should span, determining its vertical position, it can be used with <td>
  and <th> tag..

Example:

• Colspan: The colspan attribute specifies how many colums a table cell should span determining its position horizontally, it can also be used with <td> and <th> tag.

 Example:

Summary:

• Rowspan is for spanning rows vertically.
• Colspan is spaning columns horizontally.

If you are quite familiar with excel these attributes are very easy for you...

That's it for today guys i have explained you about table tag and its attributes with examples so your today's task is that you have to practice these attributes and also you have to complete your practice assignment that are uploaded as below:

Practice Assignment

For more understanding of html you can check out our previous blogs that are as follows:

• html basic cheatsheet
• html basic elements
• html basic guide
• html audio and video tags

If any issue arises in solving your practice assignment you can comment on this post or either you can connect with us on our social handles..

Stay tuned with us as some more wonderful content is arriving soon.