HTML Path

Examples

HTML Table Example

Creating a Data Table

HTML data table uses <table> with headers and rows for structured data.

Introduction to HTML Tables

HTML tables are used to display data in a structured format using rows and columns. They are created using the <table> element, along with child elements such as <tr> for table rows, <th> for header cells, and <td> for standard cells.

Basic Structure of an HTML Table

Let's start by creating a basic HTML table. This table will consist of a header row with column titles and a few rows of data.

Adding a Caption to Your Table

To provide a brief description of the table's contents, you can add a <caption> element. This is typically placed immediately after the opening <table> tag.

Styling Your Table with CSS

Using CSS, you can enhance the appearance of your HTML table. For instance, you can add borders, padding, and background colors to make your table more readable and visually appealing.

Responsive Tables

In modern web design, ensuring that tables are responsive is crucial. You can use CSS to make tables more adaptable to different screen sizes. One way to achieve this is by wrapping your table in a <div> element with a horizontal scrollbar.

Conclusion

HTML tables are a powerful tool for displaying structured data on your web pages. By using the elements discussed, such as <thead>, <tbody>, <caption>, and applying CSS styling, you can create attractive and functional tables that enhance the user experience.

Examples

Next
Semantic Layout