HTMl Tables

HTML tables allow web developers to arrange data into rows and columns.

HTML Table Caption

The HTML <caption> element specifies the caption (or title) of a table.
With caption-side CSS property we can aligned caption with respect to the table. 

         <table>
            <caption>Table data</caption>
            <tr>
                <td>Chris</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Denis</td>
                <td>45</td>
            </tr>
         </table>

Table data
Person Age
Chris 38
Denis 45


HTML Table Grouping Styling


        table {
            border-collapse: collapse;
            border: 2px solid rgb(0, 169, 206);
            font-size: 15px;
        }
        th, td {
            border: 1px solid #a5deea;
            padding: 8px 10px;
        }
        
        thead, tfoot {
            background-color: #00bcd4;
            color: #fff;
        }
        tbody {
            background-color: #f1f9fb; 
        }
        th[scope='row'] {
            background-color: #cbf0f9;
        }

Currencies table
Rank Currency Symbol % of daily trades (April 2019)
1 United States Dollar USD (US$) 88.3%
2 Euro EUR (€) 32.3%
3 Japanese yen JPY (¥) 16.8%
4 Pound sterling GBP (£) 12.8%
5 Australian dollar AUD (A$) 6.8%
Total 200%


HTML Styling by <colgroup> and <col>

The HTML <colgroup> element defines a group of columns within a table.
The HTML <col> element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element. 

      .week {
        background-color: #d7d9f2;
       }

       .weekend {
        background-color: #ffe8d4;
       }
    
       <table>
            <colgroup>
                <col>
                <col span="5" class="week" >
                <col span="2" class="weekend" >
            </colgroup>
            <tr>
                <th></th>
                <th>MONDAY</th>
                <th>TUESDAY</th>
                <th>WEDNESDAY</th>
                <th>THURSDAY</th>
                <th>FRIDAY</th>
                <th>SATURDAY</th>
                <th>SUNDAY</th>
            </tr>
            <tr>
                <td>Activity</td>
                <td>College</td>
                <td>College</td>
                <td>College</td>
                <td>College</td>
                <td>College</td>
                <td>Swimming Classes</td>
                <td>Shopping</td>
            </tr>
       </table>

MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY SUNDAY
Activity College College College College College Swimming Classes Shopping