How to Create and Format Tables in HTML5 - HTML5 Tables

Zia

2 Followers

Follow

Jul 20, 2024

-

31 sec read

535

0

0

0

❌

Tables allow the user to view the data in a structured and classified format. Tables can contain any type of data such as text, images, links, and other tables. The user can create tables for displaying tỉmetables, financial reports, and so on.

Creating and Formatting Tables

The user can represent the data in a tabular format by using the <table> element in HTML. The <tr> element divides the table into rows and the <td> element specifies columns for each row. By default, a table does not have a border. The border attribute of the <table> element specifies a border for making the table visible on a Web page.

The code uses the <table> element to create a table. The border attribute of the <table> element gives a border to the table, which is one pixel wide. The <thead> element contains a header row (<tr>) with table headers (<th>). The <tbody> element contains table rows (<tr>) with table data (<td>). The <tr> element within the <table> element creates rows. The <td> element creates cells with the values John, Doe, and 30 in the first row; Jane, Smith, and 25 in the second row; and Emily, Jones, and 35 in the third row.

The colspan attribute allows the user to span a cell along a horizontal row. The value of the colspan attribute specifies the number of cells across which a specific cell shall be expanded.

In this code, The <th> element specifies two column headings, Technology and Computer. Each of these header cells horizontally spans across three columns by setting the colspan attribute of the <th> element to 3. Each of these headings has three sub-headings, namely Name, Location, and another unspecified heading. The subsequent rows display the details of employees.

2. Rowspan Attribute

The code creates a table with a border width of one pixel. The three <th> elements within the <tr> element specify column headings: Month, Savings, and Savings for holiday! The row span attribute in the <td> element combines the two rows of the Savings for Holiday! Column into a single cell displaying $50. The savings for January and February are shown in their respective rows, with January having $100 in savings and February having $80.

3. Horizontal alignment

The four possible values for setting horizontal alignment are as follows:

To set the alignment with style you can use the text-align attribute to specify horizontal alignment.

The code aligns the data within the row using a style within the <tr> element. The table content is left aligned by setting the value of the text-aligned attribute to the left.

4. Vertical alignment

To set the alignment with the style you can use the text-align attribute to specify the vertical alignment using the following syntax:

The text-align attribute is set to the value center, which specifies that the data within the rows are centrally aligned. The vertical alignment is used to specify the vertical alignment in the table.

5. Margin Attributes

Cell padding allows the user to control the look of the content on a page.

Suppose the user wants to set the padding attribute for individual cells. Then, he/she can use the padding attribute in a style as follows:

Unlike the <th> element that is used to specify a heading for an individual row or column, the <caption> element allows the user to specify a title for your entire table. There can only be one caption for a table.

The <caption> element that is used inside the <table> element specifies a caption for the entire table, a Monthly Saving Report.