HTML Tables

    HTML provides tables to arrange and display data using rows and columns.

    Example

    Student ID Name Marks
    S001 Sam 980
    S002 Jose 975
    S003 Ben 760
    S004 Sofi 950
    S005 Jack 948
    S006 Tonny 945

    HTML <table> element

    To define a table we use the HTML <table> element. Inside the <table> the element we use the <tr> element to represent table rows, <th> for table heading and <td> for table data. We fill the data inside the table row-wise. Example

    <table>
      <tr>
        <th>Student ID</th>
        <th>Name</th>
        <th>Marks</th>
      </tr>
    
      <tr>
        <td>S001</td>
        <td>Sam</td>
        <td>980</td>
      </tr>
    
      <tr>
        <td>S002</td>
        <td>Jose</td>
        <td>975</td>
      </tr>
    
      <tr>
        <td>S003</td>
        <td>Ben</td>
        <td>760</td>
      </tr>
    
      <tr>
        <td>S004</td>
        <td>Sofi</td>
        <td>950</td>
      </tr>
      
      <tr>
        <td>S005</td>
        <td>Jack</td>
        <td>948</td>
      </tr>
    
      <tr>
        <td>S006</td>
        <td>Tonny</td>
        <td>945</td>
      </tr>
    </table>

    Output

    Student ID Name Marks
    S001 Sam 980
    S002 Jose 975
    S003 Ben 760
    S004 Sofi 950
    S005 Jack 948
    S006 Tonny 945

    <td> element can have any type of HTML data which include text, image, video, audio, etc.

    Table Border

    border is a CSS property so it can be applied using style attribute or element. If we do not mention the border property, then the browser will not show any border around the table. Example

    <table style="border: 2px solid red">
      <tr>
        <th>Student ID</th>
        <th>Name</th>
        <th>Marks</th>
      </tr>
    
      <tr>
        <td>S001</td>
        <td>Sam</td>
        <td>980</td>
      </tr>
     
      <tr>
        <td>S002</td>
        <td>Jose</td>
        <td>975</td>
      </tr>
    </table>

    Output

    Student ID Name Marks
    S001 Sam 980
    S002 Jose 975

    Table Border Collapse

    border-collapse is also a CSS property which merges the adjacent border cells. Example

    table, th, td
    {
    border: 2px solid blue;
    border-collapse: collapse;
    }

    Table Cell Padding

    The cell padding defines the spacing between cell data and its border. If we do not mention the padding then by default, there would be no spacing between the data and its border. Example

    td {
    border: 2px solid red;
    padding: 20px;
    }

    Align Table Data

    By default, the browser bold and centralize the <th> data, whereas the <td> data usually print with the left alignment. However, using the text-align property of CSS, we can change the alignment of table cell data. Example

    td {
    text-align: center;
    }

    Table Border Spacing

    border-spacing is a CSS property which defines the spacing between the border of table cells. Example

    table {
      border-spacing: 10px;
    }

    <th> and <td> colspan attribute

    colspan is an attribute that can be used with <th> and <td> element to increase the column span. Example

    <table>
    <tr>
    <th>Student Name</th>
    
    <!-- This table heading will take space of two columns -->
    <th colspan="2">Parent's Telephone</th>
    </tr>
    
    <tr>
    
    <td>Sam</td>
    <td>988282828</td>
    <td>728282828</td>
    </tr>
    
    <tr>
    <td>Jose</td>
    <td>975232322</td>
    <td>782828282</td>
    </tr>
    
    </table>

    Output

    Student Name Parent's Telephone
    Sam 988282828 728282828
    Jose 975232322 782828282

    <th> and <td> rowspan attribute

    Similar to colspan, rowspan attribute is used to span the row by more than one row. Example

    <table>
    <tr>
    <th>Student Name</th>
    <th>Parent's Telephone</th>
    </tr>
    
    <tr>
    <!-- This table data will occupy two rows -->
    <td rowspan="2">Sam</td>
    <td>975232322</td>
    </tr>
    
    <tr>
    <td>782828282</td>
    </tr>
    
    </table>

    Output

    Student Name Parent's Telephone
    Sam 975232322
    782828282

    Table Caption

    The <caption> element provides a title to the table. Using the caption element, we can set the table heading and tell the user what this table is all about. Example

    <table>
    
    <caption>Student Details</caption>
    
    <tr>
    <th>Student ID</th>
    <th>Name</th>
    <th>Marks</th>
    </tr>
    
    <tr>
    <td>S001</td>
    <td>Sam</td>
    <td>980</td>
    </tr>
    
    <tr>
    <td>S002</td>
    <td>Jose</td>
    <td>975</td>
    </tr>
    </table>

    Output

    Student Details
    Student ID Name Marks
    S001 Sam 980
    S002 Jose 975

    Summary

    • In HTML we have <table> element to represent table on the web-page.
    • <table> element contain child element <tr>.
    • <tr> represent table row and it contain two main child elements <th> and <td>.
    • <th> define table heading and it normally used with the first <tr> element.
    • <td> represent table data and it can contain any type of HTML element.
    • colspan is an attribute which increases the column span by occupying its neighbour columns.
    • rowspan attribute can increase the span of a row by occupying the neighbouring rows.

    People are also reading: