Structure
HTML Tables
Building Tables in HTML
HTML tables use <table>, <tr>, and <td> for structured data display.
Introduction to HTML Tables
HTML tables are used to display data in a tabular format. The basic structure of an HTML table includes several tags: <table> for the table itself, <tr> for table rows, and <td> for table data cells. These elements work together to organize data into rows and columns.
Basic Table Structure
To create a table, you start with the <table> element. Inside this element, you add <tr> tags for each row and <td> tags within the rows for each cell of data. Here is a simple example:
Adding a Table Header
Table headers can be added using the <th> tag, which stands for table header. These headers typically sit inside a <thead> section, although this is not strictly necessary for simple tables. Headers are usually bold and centered by default.
Using the Caption Element
The <caption> element is used to provide a title or explanation for the table. It should be the first child of the <table> element. This is particularly useful for accessibility, as it helps screen readers to describe the table.
Styling Tables with CSS
While HTML provides the structure for tables, CSS is often used to add styling to make tables more visually appealing. You can use CSS to set borders, background colors, and typography. Here is an example:
Spanning Rows and Columns
Sometimes, you may need a cell to span multiple rows or columns. This can be achieved using the rowspan and colspan attributes on a <td> or <th> element. This is particularly useful for creating complex layouts.
