Chuck's Academy

Basic HTML

Home / Topic / Basic HTML / Tables in HTML

Tables in HTML

Chapter 6: Tables

Structure of a Table (<table>, <tr>, <td>, <th>)

HTML tables are created using the <table> tag, which contains rows (<tr>) and cells (<td> for data and <th> for headers). Tables are useful for organizing information in a rows-and-columns format.

html
"In this example, the table contains a header row, which defines the columns Name, Age, and City, followed by two data rows for Ana and Pedro."

Table Headers and Titles (<caption>, <thead>, <tfoot>)

We can add a title to the table with <caption>, and organize the table's header and footer sections using <thead> and <tfoot>. This helps make the table more understandable and easier to maintain.

html
"This table has a caption called Contact Information. The thead contains the header row, and the tfoot contains the footer of the table, showing the total number of contacts."

Merging Cells (colspan, rowspan)

HTML allows merging cells horizontally using colspan and vertically with rowspan, ideal for titles spanning multiple columns or rows.

html
"In this table, the General Information header spans two columns due to the colspan attribute. In the last row, the Age cell uses rowspan to merge with the cell below."

Creating Responsive Tables

To create tables that adapt to different screen sizes, we can apply CSS like overflow-x: auto; to a container wrapping the table. This allows the table to scroll horizontally on smaller devices.

html
"Here, the table is contained within a div with overflow-x auto, allowing horizontal scrolling on small screens. This aids in viewing on mobile devices."

End of Chapter

With the knowledge of tables, you can now organize data in a structured manner on your web pages. In the next chapter, we will learn how to create interactive forms and collect user data.

Back to previous chapter
Mark as read and continue
Ask me anything