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 tabular format. They are created using the <table> element, along with related elements such as <tr> (table row), <th> (table header), and <td> (table data). Understanding these elements is essential for creating effective tables.

Basic Table Structure

A simple HTML table consists of a <table> element that contains one or more <tr> elements. Each <tr> can contain a series of <th> or <td> elements. Here's a basic example of a table with headers and data rows:

Adding Borders to Your Table

By default, HTML tables don't have borders. You can add borders using the border attribute in the <table> tag or using CSS for more control. Below is an example of how to add borders using the border attribute:

Styling Tables with CSS

CSS provides powerful options for styling your tables. You can control the appearance of borders, spacing, and colors to enhance readability and aesthetics. Here's an example using CSS:

Conclusion

HTML tables are a simple yet powerful tool for displaying data in a structured manner. By using <table>, <tr>, <th>, and <td> tags, you can create organized tables. Enhancing them with CSS allows you to improve the visual presentation and user experience.

Examples

Next
Semantic Layout