Html Tutorial

HTML-Tables

Tables

Tables helps us to arrange our data in rows and columns. Tables are a simple and easy way to explain and understand a data.

  • In HTML we use <table> tag to make a table.
  • <tr> tag is used to insert a new row in table.
  • <td> tag is used to insert data in row.
  • <th> tag is used to give heading to each column.
  • Example:

    <body>
    <table border="1">
    <tr><th>Country</th><th>Capital</th></tr>
    <tr><td>India</td><td>New Delhi</td></tr>
    <tr><td>France</td><td>Paris</td></tr>
    <tr><td>Italy</td><td>Rome</td></tr>
    </table>
    </body>
    

    Output:

    CountryCapital
    IndiaNew Delhi
    FranceParis
    ItalyRome

    As you can see in the output every cell has its own border. To make this table more beautiful we collapse this borders.

    <body>
    <table border="1" style="border-collapse:collapse">
    <tr><th>Country</th><th>Capital</th></tr>
    <tr><td>India</td><td>New Delhi</td></tr>
    <tr><td>France</td><td>Paris</td></tr>
    <tr><td>Italy</td><td>Rome</td></tr>
    </table>
    </body>
    

    Output:

    CountryCapital
    IndiaNew Delhi
    FranceParis
    ItalyRome

    Using colspan

    colspan is an attribute of <td> tag. It is used to merge two or more columns.

    Example:

    <body>
    <table style="border-collapse:collapse">
    <tr>
    <th>Item</th><th>Quantity</th><th>Price</th><th>Cost</th></tr>
    <tr><td>Pen</td><td>10</td><td>5</td>td>50</td></tr>
    <tr><td>Note Book</td><td>5</td><td>30</td><td>150</td></tr>
    <tr><td colspan="3">Total Cost</td><td>200</td></tr>
    </table>
    </body>
    

    Output:

    ItemQuantityPriceCost
    Pen10550
    Note Book530150
    Total Cost200

    From the above example you can see that colspan attribute is specified in last row and the value of colspan is defined as 3 which means that three columns must combine in that row. You can try with different numbers.

    Using rowspan

    rowspan is an attribute of <td> tag. It is used to merge two or more rows.

    Example:

    <table style="border-collapse:collapse">
    <tr><th>Question</th><th>Options</th></tr>
    <tr><td rowspan="2">Full form of HTML?</td><td>Hyper Text Markup Language.</td></tr>
    <tr><td>Hyper Text Makeup Language.</td></tr>
    </table>
    

    Output:

    QuestionOptions
    Full form of HTML?Hyper Text Markup Language.
    Hyper Text Makeup Language.

    As you can see that using rowspan we merged two rows (2 and 3). Start making your own table and play with this numbers to get more cleared about rowspan and colspan attributes.

    Advertisment

    Share


    Advertisement