HTML: Adding a Table

These are some HTML tag elements that can be used to organize data into a table format that can be displayed on your HTML website.

TAG DESCRIPTION
<table> This tag element allows you to create one table. Attributes used often are:
  • border – to create a visible border to your table. Input a number as its corresponding value.
  • width – to adjust the width of your table. Input a percentage or a pixel number as a value.
<caption> Use this tag element to give your table a caption. When used, it usually is placed immediately after the <table>.
<tr> A tag element used within a <table> tag to create a row. The following is an example of an attribute that is used often:
  • align=”center” – this attribute and value will align every content inside the row to the center.
<td> A tag element used within a <table> tag to create a single table cell within a row. Only use it to input actual data inside a cell, do not leave it empty. It can use, among others, the following attributes:
  • rowspan=”2” – this example would create a table cell that will span in more than 2 rows.
  • coldspan=”2” – this example would create a table cell that will span in more than 2 columns.
<th> These tag element is used similarly to <td> tags (and it also uses the same attributes) to bold the text within a single table cell. It is often used for table cell headings.

 

write12Example

<table>
<caption>Recent Major Volcanic Eruptions</caption>
<tr>
<th>Volcano Name</th>
<th>Location</th>
<th>Last Major Eruption</th>
<th>Type of Eruption</th>
</tr>
<tr>
<td>Mt. Lassen</td>
<td>California</td>
<td>1914-17</td>
<td>Explosive Eruption</td>
</tr>
<tr>
<td>Mt. Hood</td>
<td>Oregon</td>
<td>1790s</td>
<td>Pyroclastic flows and Mudflows</td>
</tr>
</table>