How to Create and Format Tables in HTML5 - HTML5 Tables

Zia

2 Followers

Jul 20, 2024

31 sec read

536

❌

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

A table is made up of rows and columns. The intersection of each row and column is called a cell. A row is made up of a set of cells that are placed horizontally. A column is made up of a set of cells that are placed vertically.

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.

<table>

<thead>

<tr>

<th>First Name</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Emily</td>

<td>Jones</td>

</tr>

</tbody>

</table>

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.

1. Colspan Attribute

The user might feel the need to span two or more cells while working with tables. Spanning refers to the process of extending a cell across multiple rows or columns. To span two or more columns, use the colspan attribute of the <td> and <th> elements.

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.

<tr>

<th colspan="2">Technology</th>

<th colspan="2">Computer</th>

</tr>

<tr>

<th>Location</th>

<th>Location</th>

</tr>

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 rowspan attribute spans a data cell across two or more rows. It allows the user to span a data cell along a vertical column. Like the col span attribute, the row span attribute can be used within the <td> and <th> elements.

<table>

<tr>

<th>Month</th>

<th>Savings</th>

<th>Savings for holiday!</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</table>

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

Alignment determines the representation of text along the left, right, or center positions. In HTML, by default, the data within the table is aligned on the left side of the cell. Sometimes, the user might need to align the data in some other position to improve readability or focus on some data. HTML5 has deprecated the align attribute.

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

Left: Aligns the data within a cell on the left side.
Center: Aligns the data within the cell in the center.
Right: Aligns the data within the cell on the right side.
Justify: Align the data within the cell by adjusting the text at the edges.

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

<td>technology</td>

</tr>

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

Users can vertically align the position of data earlier by using the align attribute. HTML5 has deprecated the align attribute. The possible values of vertical alignment are as follows:

Top: Vertically aligns the data within the cell at the top.
Middle: Vertically aligns the data within the cell in the center.
Bottom: Vertically aligns the data within the cell at the bottom.

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

The style can also be applied to individual rows, cells, or the entire table.

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

The data in a table might appear cluttered, which may affect readability. This might make it difficult to comprehend the data as the data. To overcome this issue, use the cell margin attributes.

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

Padding:

Padding is the amount of space between the content and its outer edge. For tables, padding is specified as the space between the text and the cell border.

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:

6. Caption element

The user can add a heading to a table in HTML. To specify the main heading for the table, use the <caption> element. The <caption> element defines a caption for the table. It is a sub-element of the <table> element. It must be present immediately after the <table> tag.

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.

<table>

<caption>monthly Saving Report</caption>

<tr>

<th>Month</th>

<th>Savings</th>

<th>Savings for holiday!</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</table>

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

HTML5 HTML HTML5 Tables HTML table create table in HTML HTML table generator how to create table in HTML creating and formatting tables table attributes in HTML

Published by:

2 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.