Formatting Tables
The <table> element has a few attributes that can be used to control the appearance of the table. The border attribute specifies the width of the border around the table. The cellpadding attribute specifies the amount of padding between the cells in the table. The cellspacing attribute specifies the amount of space between the cells in the table.
The <tr> element has a few attributes that can be used to control the appearance of the rows in the table. The bgcolor attribute specifies the background color of the row. The align attribute specifies the alignment of the text in the row.
The <td> and <th> elements have a few attributes that can be used to control the appearance of the cells in the table. The width attribute specifies the width of the cell. The align attribute specifies the alignment of the text in the cell. The valign attribute specifies the vertical alignment of the text in the cell.
Here is an example of a simple table:
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>United States</td>
<td>Washington, D.C.</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
</tr>
<tr>
<td>Mexico</td>
<td>Mexico City</td>
</tr>
</table>Task
Add a border with value 1, cellpadding with value 10, and cellspacing with value 5 attributes to the HTML table given in the editor. Run the code to see the results and experiment with the code to get used to it.
Examples
Here are some examples of tables:
- A table of countries and their capitals.
- A table of products and their prices.
- A table of students and their grades.
- A table of sports teams and their records.
- A table of weather data.