HTML Table

Add cell padding \ Add border Spacing

Cell padding specifies the spcae between the cell content and its borders.

  • If you do not specify a padding, the table cells will be displayed without padding.

Border Spacing specfies the space between the cells. 

1
2
3
4
5
6
th, td{
 padding: 15px;
}
table {
  border-spacing: 5px;
}

Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, using the CSS text-align property;

1
2
3
th {
    text-align: left;
}

Cell that Spans Many Columns \ Rowspan

Use the colspan attribute:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
---------------
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Add a Caption

To add a caption to a table, use the <caption> tag

The <caption> tag must be inserted immediately after the

tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
-----------
#t01 {
  width: 100%; 
  background-color: #f1f1c1;
}

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}