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. 

In this article, you will learn about HTML tables, and we will cover the following topics: 

  • What is an HTML table?
  • Defining tables in HTML
  • Cellpadding and cellspacing
  • Colspan and rowspan attributes
  • Border and backgrounds
  • Table height and width

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. 

Full Stack Web Developer Course

To become an expert in MEAN StackView Course
Full Stack Web Developer Course

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

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!

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. 

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.