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

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

Merging Cells (colspan, rowspan)

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

html

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

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.