Welcome to our guide on how to write a table in HTML. HTML tables are a great way to display data in a structured format, making it easy for users to understand and navigate. Let's dive right in and learn how to create and style tables in HTML.
HTML tables are created using the <table> tag, with each row defined by the <tr> tag, and each cell by the <td> tag. The <th> tag is used for table headers. Here's a simple example:
Creating a Basic Table
To start, let's create a basic table with some data. We'll use the <table>, <tr>, <th>, and <td> tags as shown below:
| Name | Age |
|---|---|
| John Doe | 30 |
| Jane Smith | 28 |
Understanding Table Structure
The <table> element is the container for the table data. Each row of the table is defined by the <tr> tag. Inside each <tr>, <th> is used for table headers, and <td> for table data.
In the example above, the first row contains headers for 'Name' and 'Age'. The subsequent rows contain data for these headers.
Adding More Rows and Columns
To add more rows to the table, simply add more <tr> tags with the appropriate <td> or <th> tags. To add more columns, add more <th> or <td> tags within the <tr> tags.
For example, to add another column for 'Country', you would modify the table like this:
| Name | Age | Country |
|---|---|---|
| John Doe | 30 | USA |
| Jane Smith | 28 | Canada |
Styling Tables with CSS
While HTML is used to structure the table, CSS is used to style it. You can apply CSS styles to the <table>, <tr>, <th>, and <td> tags to change the appearance of the table.
For example, to add some basic styles like border, background color, and text alignment, you can use the following CSS:
Using the <colgroup> and <col> Tags
The <colgroup> and <col> tags allow you to apply styles to specific columns. For example, to make the 'Age' column bold, you can use the following:
| Name | Age | Country |
|---|---|---|
| John Doe | 30 | USA |
| Jane Smith | 28 | Canada |
Now that you know how to create and style tables in HTML, it's time to put your new skills into practice. Start by creating a simple table, then gradually add more rows and columns. Once you're comfortable with the basics, explore more advanced table features like rowspan and colspan.