TIL3 - HTML - Tables

HTML Tables

• <table> element creates a table
• <tr> element creates rows
• <td> element creates cells with data
  - you can format cells to span multiple rows or columns with attributes:
  • colspan makes a <td> element take multiple columns. You can specify how many columns with an integer >= 1
  • rowspan works the same, but in rows.
• <th> element creates header items
  - you can specify whether the header item is a row header or a column header with scope attribute. A column header takes value "col" and a row header takes value "row"
• a table can be divided into 'sections':
  - header, body, footer
  • <thead> for the header (*used for column headers)
  • <tbody> for the body
  • <tfoot> for the results (i.e. sum, average, etc. of the body)

• ex)

<table>
  <thead>
    <th></th>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
    <th scope="col">Salary(USD)</th>
  </thead>
  <tbody>
    <tr>
      <th scope="row" rowspan="2">Korea</th>
      <td>Chulsoo</td>
      <td>28</td>
      <td>50,000</td>
    </tr>
    <tr>
      <td>Younghee</td>
      <td>26</td>
      <td>55,000</td>
    </tr>
    <tr>
      <th scope="row" rowspan="2">U.S.</th>
      <td>David</td>
      <td>30</td>
      <td>80,000</td>
    </tr>
    <tr>
      <td>Jenny</td>
      <td>27</td>
      <td>65,000</td>
    </tr>
  </tbody>
  <tfoot>
    <td colspan="2">Average</td>
    <td>27.75</td>
    <td>62,500<td>
  </tfoot>
</table>

This code produces: