How to Create Table in HTML? Last Updated : 20 Nov, 2024 Comments Improve Suggest changes Like Article Like Report HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable ElementsDescription<table>The <table> element defines the start and end of the table. It acts as a container for all the table-related elements.<tr>The <tr> (table row) element defines a row within the table. Each <tr> tag represents a horizontal row of cells or data entries.<th>The <th> (table header) element defines header cells within a table row (<tr>). Header cells are typically used to label columns or rows in the table. They are usually bold and centered by default, providing emphasis on the content they represent.<td>The <td> (table data) element defines regular data cells within a table row (<tr>). Data cells contain actual data or information that is displayed in the table. Unlike <th> cells, <td> cells are not bold and are aligned to the left by default.<thead>The <thead> element defines the header section of a table, containing header rows (<tr> with <th>).<tbody>The <tbody> element groups the main content of the table, containing rows (<tr>) with data cells (<td>).<tfoot>The <tfoot> element defines the footer section of a table, usually containing summary rows or totals.<colgroup> and <col>The <colgroup> element allows you to group together and style columns in a table. Inside <colgroup>, you can use <col> elements to define specific column properties such as width, alignment, and styling. This provides more control over the appearance of columns across the table.<caption>The <caption> element provides a title or description for the entire table. It is placed immediately after the opening <table> tag and before any <tr> elements.Note: The <thead>, <tbody>, <tfoot> elements help to organize the table structure logically and are optional but recommended for clarity.Table StructureWithin the <table> element, the structure is organized as rows (<tr>) and columns defined by header cells (<th>) or data cells (<td>). Rows (<tr>) contain one or more cells (<th> or <td>), depending on the structure of the table.Basic Syntax of HTML Table<table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr></table>Example: Here is an example of an HTML table with two rows and three columns: HTML <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> </tr> </table> Note: The border attribute is not supported by HTML5. CSS border property is used to set the table border in HTML5.OutputAdding Table Heading to RowsTo add a table heading to rows in an HTML table, you can use the <th> element within the <tr> element. This is useful when you have data that represents headings for each row. HTML <table border="1"> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> </tr> </table> OutputHTML Table with <thead>, <tbody>, and <tfoot> ElementsThe <thead> section is used for headers that describe the columns of the table. The <tbody> section contains the main data rows. The <tfoot> section provides a footer row typically used for summary information or totals. HTML <h2>Sales Report</h2> <table border="1"> <thead> <tr> <th>Month</th> <th>Product Category</th> <th>Units Sold</th> <th>Revenue ($)</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>Furniture</td> <td>150</td> <td>$15,000</td> </tr> <tr> <td>February</td> <td>Furniture</td> <td>120</td> <td>$12,000</td> </tr> <tr> <td>January</td> <td>Electronics</td> <td>200</td> <td>$25,000</td> </tr> <tr> <td>February</td> <td>Electronics</td> <td>180</td> <td>$20,000</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Total</td> <td>650</td> <td>$72,000</td> </tr> </tfoot> </table> Output Comment More infoAdvertise with us Next Article How to group the body content in a table using HTML5 ? M manaschhabra2 Follow Improve Article Tags : Web Technologies HTML HTML5 HTML-Questions HTML Table +1 More Similar Reads How to Create Table in HTML? HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable ElementsDescription<table>The <table> element def 3 min read How to group the body content in a table using HTML5 ? In this article, group the body content in an <table> element in a document. It is used to define a standard cell in an HTML table. Syntax: <tbody> ... </tbody> Example 1: In this example, we use some HTML tags and make the group the body content in a table. html <!DOCTYPE html 3 min read How create table without using <table> tag ? HyperText Markup Language (HTML) is the standard markup language used to create web pages. HTML allows table creation using the <table> tag. However, tables can also be created in HTML without using <table> tag with the help of Cascading Style Sheet (CSS). CSS is a mechanism for adding s 3 min read What is the rule attribute in HTML Table ? This is an HTML attribute, that is used to specify which parts of the inside borders should be visible. The HTML rule attribute is applicable on table tags. The <table> rules attribute is not supported by HTML 5. Syntax: <table rules="value"> Attributes: This attribute accepts 5 values a 1 min read Why should we avoid use of tables for layout in HTML ? In this article, we will learn why we should avoid using tables for layout in HTML. A website can be divided into various sections comprising of header, menus, content, and footer based on which there are many different layout designs available for developers. Different layouts can be created by usi 4 min read How to fix the height of rows in the table? Fixing the height of rows in a table ensures that all rows have a uniform appearance, preventing them from resizing dynamically based on their content. This approach is useful for maintaining a consistent presentation, especially when dealing with tabular data that needs to be displayed neatly.Here 3 min read How to set the number of rows a table cell should span in HTML ? In this article, we will show how multiple rows are spanned by a table header cell. The task can be done by using the rowspan attribute while using the <th> tag. This property is used to merge one or more cells as well as increase the height of the single header cell automatically. Syntax: 2 min read How to set fixed width for <td> in a table ? The requirement of a table is very normal in the process of designing a web page. HTML provides the <table> tag to construct the table and to define rows and columns <tr> and <td> tags respectively are used. By default, the dimensions of the rows and columns in a table are adjusted 5 min read How to merge table cells in HTML ? The purpose of this article is to explore the method of merging table cells in HTML using the rowspan and colspan attributes. By utilizing rowspan, multiple cells in a row can be merged or combined, while colspan enables the merging of cells in a column within an HTML table. This technique proves es 2 min read How to Create Time-Table Schedule using HTML? A time table or schedule is essential for organizing tasks, events, or classes. We’ll create a basic time-table layout using HTML. A Table is an arrangement of rows and columns. Anyone can create a table by knowing the basics of HTML(HyperText Markup Language). In HTML we can use the <table> t 3 min read Like