A Complete Guide to HTML Tables

HTML is one of the three main components of the web, along with CSS and JavaScript. These components are used to primarily develop web pages and applications that run on web browsers like Chrome, Firefox, and Internet Explorer. Almost all web applications use HTML because it is the only language that browsers understand and render on a computer screen.

What is an HTML table?

HTML tables are used to arrange data, such as text, images, links, other tables, etc. into rows and columns of cells.

Defining Tables in HTML

The HTML table is created using the <table> tag. The <tr> tag defines each row in the table and the <th> tag defines the table header. The <td> tag defines each table data/cell.

defining_html_tables-html_tables

output-defining_html_tables

Tables without proper cellspacing and cellpadding are difficult to read. We can adjust the cell spaces with cellpadding and cellspacing attributes.

Cellpadding and Cellspacing attributes

Cellpadding and cellspacing properties are used to adjust the white space in the cells of your table.

The cellspacing attribute defines space between table cells, while cellpadding denotes the distance between cell borders and the content inside the cells.

Cellpadding_and_cellspacing

This will produce the following result:

output_cellpadding_and_cellspacing

You can also add a caption to the table to add titles to the table.

caption-tag

This will produce the following result:

output-caption

Occasionally, users may need to join two or more rows or columns to add sub-data inside a row or a column. To do this, colspan and rowspan attributes are used.

Colspan and Rowspan Attributes

The colspan attribute is used to join two or more columns into a single column. Similarly, you will use the rowspan if you want to combine two or more rows.

Colspan-and-rowspan

This will produce the following result:

output-colspan-and-rowspan

Changing the background color, border color, height, and width of the table will modify the table’s appearance, which can make it more readable and presentable.

Border and Backgrounds

You can set the table background in the following way:

Bg-color Attribute

Used to set background color for the whole table or just for one cell

Background Attribute

Used to set the background image for the entire table or for just one cell

Border color Attribute

Used to set the border color of the table

table-background

This will produce the following result:

output-table-background

Table Height and Width

You can specify table height and width in terms of pixels or percentage of available

widht-and-height

/output-height-and-width

Conclusion

HTML tables are an essential part of HTML documents. In this tutorial, we covered how to create tables in documents. We also worked with some of the table attributes. To boost your career in web development we recommend gaining certification. Simplilearn’s Full Stack Java Developer will help you master web development. The course offers a comprehensive curriculum that covers front-end, middleware, and back-end Java web developer technologies. You will learn to build an end-to-end application, test and deploy code, store data using MongoDB, and much more.

If you have any questions, please feel free to ask them in our comments section, and our experts will answer them promptly.