Abstract: HTML (Hypertext Markup Language) has many tags and attributes to use for developing a webpage. Table attributes are one of them. Table attributes are used to create tables on web pages. The table consists of data that is easy to summarize information. Let's Proceed further with a smile! Scope: This article will include more about table attributes in HTML and its advantages. With the help of tables, we have many advantages like we visualize our data and easily understand our data. We had some tags and styles for table tags. By the end of the article, you will be able to create tables for web pages. Let’s see more on this! Introduction to Table attributes in HTML: Table attributes in HTML are defined by using <table> tag and it has some tags like <tr>, <td>, <th>, <caption>, <thead>, <tbody>, <tfoot>, <colgroup>, <col>… which are used to fill data into the tables on our web pages. Tables allow developers to arrange data into rows and columns. Let us understand table attributes and the importance of them using more and more examples. Syntax: <table> ----------- ----------- </table> We use tags like <tr>, <th> inside table tags. <tr> is used for inserting a table row. <th> is used as headers. <td> is used to insert data in that particular row. Example 1: (including <tr>, <th>, <td>) <table> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> OUTPUT: ** ** For making it more stylish we use styling attributes and tags like <caption>, adding borders, background… Example 2: (including <tr>, <th>, <td> and also using border attribute) <table border= “1”> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> OUTPUT: We can also use this with CSS Property. table, td, th { Border: 1px solid; } We get the same output as above. Example 3: (including <tr>, <th>, <td>, <caption> and also using border attribute) <table border="1"> <caption> Student Marks information </caption> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <style> caption { border: 2px solid; padding: 0.7rem; } </style> OUTPUT: Example 4: (adding background color to any 2 row) <table border="1"> <caption> Student Marks information </caption> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr bgcolor= lightgray> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr bgcolor= lightgray> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <style> caption { border: 2px solid; padding: 0.7rem; } </style> OUTPUT: Example 4: (Even and Odd cell Styling of HTML Table) \ <table border="1"> <caption> Student Marks information </caption> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <style> td, caption, th { padding: 0.7rem; } table, td, th { border: 1px solid green; margin: 5rem; } tr:nth-child(even) { background-color: rgb(0, 255, 255); } tr:nth-child(odd) { background-color: rgba(113, 112, 0, 0.418); } th { color: white; background-color: lightgray; } caption { border: 2px solid; background-color: lightblue; } </style> OUTPUT: Table Attributes Tags Definition <table> … </table> Used to define a table. <tr> … </tr> Used to define a row in table. <th> … </th> Used to define a header cell in table. <td> … </td> Used to define a cell in table. <caption> … </caption> Used to write a caption. <table align= “center”> … <table> Used aligning table to center <table border= “”> ... </table> Used to get border to table <table colspan or rowspan= “”> … </table> Used for rowspan or colspan in table <table bgcolor= “”> ... </table> Used to get bgcolor to cell in table <table cellpadding= “”> … </table> Used to get Cell Spacing in table <table cellspacing= “”> … </table> Used to get Cell Padding in table <thead> Used to group header content in table <tbody> Used to group body content in table <tfoot> Used to group footer content in table Advantages of table attributes in HTML Tables are used to get information quickly and easily. Tables are used to provide efficient readability in displaying rows and columns. Table reduces the complexity of searching any information and represents the visual information in easy format. We can add the information very quickly and easily in tables when new data is given. Conclusion Now, we are at the end of the article, here we learned table attributes in HTML and Styling of tables using Styling CSS attributes. To learn more about HTML table attributes visit Scaler Topics Author Bio: Vaishnavi Yadafrom GNITS, Hyderabad currently pursuing an engineering 3rd-year specialization in Computer Science and Engineering. I am passionate to write technical blogs with expertise in HTML, CSS, Python, JS (beginner), C, etc, also I write some blogs in Medium Abstract : Abstract HTML (Hypertext Markup Language) has many tags and attributes to use for developing a webpage. Table attributes are one of them. Table attributes are used to create tables on web pages. The table consists of data that is easy to summarize information. Let's Proceed further with a smile! Scope: Scope: This article will include more about table attributes in HTML and its advantages. With the help of tables, we have many advantages like we visualize our data and easily understand our data. We had some tags and styles for table tags. By the end of the article, you will be able to create tables for web pages. Let’s see more on this! Introduction to Table attributes in HTML: Introduction to Table attributes in HTML: Table attributes in HTML are defined by using <table> tag and it has some tags like <tr> , <td>, <th>, <caption>, <thead>, <tbody>, <tfoot>, <colgroup>, <col> … which are used to fill data into the tables on our web pages. Tables allow developers to arrange data into rows and columns. <table> <tr> <td>, <th>, <caption>, <thead>, <tbody>, <tfoot>, <colgroup>, <col> Let us understand table attributes and the importance of them using more and more examples. Syntax: <table> ----------- ----------- </table> <table> ----------- ----------- </table> We use tags like <tr> , <th> inside table tags. <tr> <th> <tr> is used for inserting a table row. <th> is used as headers. <td> is used to insert data in that particular row. <tr> is used for inserting a table row. <th> is used as headers. <td> is used to insert data in that particular row. Example 1: (including <tr>, <th>, <td>) (including <tr>, <th>, <td>) <table> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <table> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> OUTPUT: ** ** For making it more stylish we use styling attributes and tags like <caption> , adding borders, background… <caption> Example 2: (including <tr>, <th>, <td> and also using border attribute) (including <tr>, <th>, <td> and also using border attribute) <table border= “1”> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <table border= “1”> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> OUTPUT: We can also use this with CSS Property. table, td, th { Border: 1px solid; } table, td, th { Border: 1px solid; } We get the same output as above. Example 3: (including <tr>, <th>, <td>, <caption> and also using border attribute) (including <tr>, <th>, <td>, <caption> and also using border attribute) <table border="1"> <caption> Student Marks information </caption> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <style> caption { border: 2px solid; padding: 0.7rem; } </style> <table border="1"> <caption> Student Marks information </caption> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <style> caption { border: 2px solid; padding: 0.7rem; } </style> OUTPUT: Example 4: (adding background color to any 2 row) (adding background color to any 2 row) <table border="1"> <caption> Student Marks information </caption> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr bgcolor= lightgray> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr bgcolor= lightgray> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <style> caption { border: 2px solid; padding: 0.7rem; } </style> <table border="1"> <caption> Student Marks information </caption> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr bgcolor= lightgray> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr bgcolor= lightgray> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <style> caption { border: 2px solid; padding: 0.7rem; } </style> OUTPUT: Example 4: (Even and Odd cell Styling of HTML Table) (Even and Odd cell Styling of HTML Table) \ <table border="1"> <caption> Student Marks information </caption> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <style> td, caption, th { padding: 0.7rem; } table, td, th { border: 1px solid green; margin: 5rem; } tr:nth-child(even) { background-color: rgb(0, 255, 255); } tr:nth-child(odd) { background-color: rgba(113, 112, 0, 0.418); } th { color: white; background-color: lightgray; } caption { border: 2px solid; background-color: lightblue; } </style> \ <table border="1"> <caption> Student Marks information </caption> <tr> <th>Name</th> <th>Roll No.</th> <th>Marks</th> </tr> <tr> <td>Ram</td> <td>19-555</td> <td>90</td> </tr> <tr> <td>David</td> <td>19-543</td> <td>95</td> </tr> <tr> <td>Rita</td> <td>19-678</td> <td>98</td> </tr> </table> <style> td, caption, th { padding: 0.7rem; } table, td, th { border: 1px solid green; margin: 5rem; } tr:nth-child(even) { background-color: rgb(0, 255, 255); } tr:nth-child(odd) { background-color: rgba(113, 112, 0, 0.418); } th { color: white; background-color: lightgray; } caption { border: 2px solid; background-color: lightblue; } </style> OUTPUT: Table Attributes Tags Definition <table> … </table> Used to define a table. <tr> … </tr> Used to define a row in table. <th> … </th> Used to define a header cell in table. <td> … </td> Used to define a cell in table. <caption> … </caption> Used to write a caption. <table align= “center”> … <table> Used aligning table to center <table border= “”> ... </table> Used to get border to table <table colspan or rowspan= “”> … </table> Used for rowspan or colspan in table <table bgcolor= “”> ... </table> Used to get bgcolor to cell in table <table cellpadding= “”> … </table> Used to get Cell Spacing in table <table cellspacing= “”> … </table> Used to get Cell Padding in table <thead> Used to group header content in table <tbody> Used to group body content in table <tfoot> Used to group footer content in table Tags Definition <table> … </table> Used to define a table. <tr> … </tr> Used to define a row in table. <th> … </th> Used to define a header cell in table. <td> … </td> Used to define a cell in table. <caption> … </caption> Used to write a caption. <table align= “center”> … <table> Used aligning table to center <table border= “”> ... </table> Used to get border to table <table colspan or rowspan= “”> … </table> Used for rowspan or colspan in table <table bgcolor= “”> ... </table> Used to get bgcolor to cell in table <table cellpadding= “”> … </table> Used to get Cell Spacing in table <table cellspacing= “”> … </table> Used to get Cell Padding in table <thead> Used to group header content in table <tbody> Used to group body content in table <tfoot> Used to group footer content in table Tags Definition Tags Tags Definition Definition <table> … </table> Used to define a table. <table> … </table> <table> … </table> Used to define a table. Used to define a table. <tr> … </tr> Used to define a row in table. <tr> … </tr> <tr> … </tr> Used to define a row in table. Used to define a row in table. <th> … </th> Used to define a header cell in table. <th> … </th> <th> … </th> Used to define a header cell in table. Used to define a header cell in table. <td> … </td> Used to define a cell in table. <td> … </td> <td> … </td> Used to define a cell in table. Used to define a cell in table. <caption> … </caption> Used to write a caption. <caption> … </caption> <caption> … </caption> Used to write a caption. Used to write a caption. <table align= “center”> … <table> Used aligning table to center <table align= “center”> … <table> <table align= “center”> … <table> Used aligning table to center Used aligning table to center <table border= “”> ... </table> Used to get border to table <table border= “”> ... </table> <table border= “”> ... </table> Used to get border to table Used to get border to table <table colspan or rowspan= “”> … </table> Used for rowspan or colspan in table <table colspan or rowspan= “”> … </table> <table colspan or rowspan= “”> … </table> Used for rowspan or colspan in table Used for rowspan or colspan in table <table bgcolor= “”> ... </table> Used to get bgcolor to cell in table <table bgcolor= “”> ... </table> <table bgcolor= “”> ... </table> Used to get bgcolor to cell in table Used to get bgcolor to cell in table <table cellpadding= “”> … </table> Used to get Cell Spacing in table <table cellpadding= “”> … </table> <table cellpadding= “”> … </table> Used to get Cell Spacing in table Used to get Cell Spacing in table <table cellspacing= “”> … </table> Used to get Cell Padding in table <table cellspacing= “”> … </table> <table cellspacing= “”> … </table> Used to get Cell Padding in table Used to get Cell Padding in table <thead> Used to group header content in table <thead> <thead> Used to group header content in table Used to group header content in table <tbody> Used to group body content in table <tbody> <tbody> Used to group body content in table Used to group body content in table <tfoot> Used to group footer content in table <tfoot> <tfoot> Used to group footer content in table Used to group footer content in table Advantages of table attributes in HTML Tables are used to get information quickly and easily. Tables are used to provide efficient readability in displaying rows and columns. Table reduces the complexity of searching any information and represents the visual information in easy format. We can add the information very quickly and easily in tables when new data is given. Tables are used to get information quickly and easily. Tables are used to provide efficient readability in displaying rows and columns. Table reduces the complexity of searching any information and represents the visual information in easy format. We can add the information very quickly and easily in tables when new data is given. Conclusion Now, we are at the end of the article, here we learned table attributes in HTML and Styling of tables using Styling CSS attributes. To learn more about HTML table attributes visit Scaler Topics To learn more about HTML table attributes visit Scaler Topics Scaler Topics Author Bio: Vaishnavi Yada from GNITS, Hyderabad currently pursuing an engineering 3rd-year specialization in Computer Science and Engineering. I am passionate to write technical blogs with expertise in HTML, CSS, Python, JS (beginner), C, etc, also I write some blogs in Medium Vaishnavi Yada
