What is a table?

A table is a structure used to make data organized. As discussed in the 1st lecture, early websites used tables for structure and formatting.


How do I create a table?

A table is defined using the <table> tag. Below is the fundamental structure of a table in HTML:

<table>

    <tr>

        <th>"Header"</th>

    </tr>

    <tr>

        <td>"Data"</td>

    </tr>

</table>

Terminologies:

  • tr - rows
  • th - header
  • td - data

Spanning columns/rows?

To extend a cell across multiple columns or rows, we use: <colspan="X"> and <rowspan="X"> where X is the number of columns or rows a cell should span. To demonstrate using a 5x5 table; the 1st row's 1st cell must span for 2 columns while the 3rd row's 3rd cell must span for 3 rows:

<table>

    <tr>

        <td colspan="2">1</td>

        <td>2</td>

        <td>3</td>

        <td>4</td>

    </tr>

    <tr>

        <td>5</td>

        <td>6</td>

        <td>7</td>

        <td>8</td>

        <td>9</td>

    </tr>

    <tr>

        <td>10</td>

        <td>11</td>

        <td rowspan="3">12</td>

        <td>13</td>

        <td>14</td>

    </tr>

    <tr>

        <td>15</td>

        <td>16</td>

        <td>17</td>

        <td>18</td>

    </tr>

    <tr>

        <td>19</td>

        <td>20</td>

        <td>21</td>

        <td>22</td>

    </tr>

</table>
1 2 3 4
5 6 7 8 9
10 11 12 13 14
15 16 17 18
19 20 21 22

CSS styles used for tables

Below are a list of CSS styles for tables and their description:

  • Border: thickness border-type border-color; - adds a border style to the table. Different border style types: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.

  • Border-collapse: parameter; - sets whether table borders should collapse into a single border or be separated as in standard HTML. Parameters: separate, collapse, inherit, initial.

  • Border-spacing: space-size; - property sets the distance between the borders of adjacent cells.