Tables Back

  • a table represent information in a grid format.
  • each block in the grid is referred to as a table cell.

1. Basic structure

  • <table>is used to create a table
  • <tr>represents each row
  • <td>represents each element in this row
<table>
    <tr>
        <td>15</td>
        <td>20</td>
    </tr>
    <tr>
        <td>25</td>
        <td>30</td>
    </tr>
</table>
15 20
25 30

2. Headings

  • <th> is used to represent a head for each row or each column.
<table>
    <tr>
        <th></th>
        <th scope="col">a</th>
        <th scope="col">b</th>
        <th scope="col">a+b</th>
    </tr>
    <tr>
        <th scope="row">example 1</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <th scope="row">example 2</th>
        <td>2</td>
        <td>2</td>
        <td>t</td>
    </tr>
</table>
a b a+b
example 1 1 2 3
example 2 2 2 t

3. Panning Columns & Spanning Rows

Panning Columns(合併列)
  • Attribute colspan is set to merge.
<table>
    <tr>
        <th></th>
        <th>9am</th>
        <th>10am</th>
        <th>11am</th>
        <th>12am</th>
    </tr>
    <tr>
        <th>Monday</th>
        <td colspan="2">Geography</td>
        <td>Math</td>
        <td>Art</td>
    </tr>
    <tr>
        <th>Tuesday</th>
        <td colspan="3">Gym</td>
        <td>Home Ec</td>
    </tr>
</table>
9am 10am 11am 12am
Monday Geography Math Art
Tuesday Gym Home Ec
Spanning Rows(合併行)
  • Attribute rowspan is set to merge.
<table>
    <tr>
        <th></th>
        <th>ABC</th>
        <th>BBC</th>
        <th>CNN</th>
    </tr>
    <tr>
        <th>6pm - 7pm</th>
        <td rowspan="2">Movie</td>
        <td>Comedy</td>
        <td>News</td>
    </tr>
    <tr>
        <th>7pm - 8pm</th>
        <td>Sport</td>
        <td>Current Affairs</td>
    </tr>
</table>
ABC BBC CNN
6pm - 7pm Movie Comedy News
7pm - 8pm Sport Current Affairs

4. Long table

  • <thead> is used to be put inside all the headings of a long table.
  • <tbody> is the body of the table.
  • <tfoot> is the foot of the table
<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Income</th>
            <th>Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1st January</th>
            <td>250</td>
            <td>36</td>
        </tr>
        <tr>
            <th>2nd January</th>
            <td>285</td>
            <td>48</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td>535</td>
            <td>84</td>
        </tr>
    </tfoot>
</table>
Date Income Expenditure
1st January 250 36
2nd January 285 48
535 84

5. Old Attributes

  • those attributes should be replaced by CSS.
  • width is used to indicate how wide the table shoud be.
  • cellpadding is used to set the padding inside each cell.
  • cellspacing is used to set the space between each cell.
  • border is used to set the border of the table
  • bgcolor is used to set the background color of each specific cell.
Empty Comments
Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.