• Creating HTML Tables

    HTML tables contains of rows and columns. The data is inside the column and each column are inside the row. The row is then inside the table element.

    <table>
       <tr>
          <td>This is the first cell in first row</td>
          <td>This is the second cell in first row</td>
       </tr>
       <tr>
          <td>This is the first cell in second row</td>
          <td>This is the second cell in second row</td>
       </tr>
    </table>
    Output
    This is the first cell in first row This is the second cell in first row
    This is the first cell in second row This is the second cell in second row

    Adding a border attribute will make our table more noticeable.

    <table border="1">
       <tr>
          <td>This is the first cell in first row</td>
          <td>This is the second cell in first row</td>
       </tr>
       <tr>
          <td>This is the first cell in second row</td>
          <td>This is the second cell in second row</td>
       </tr>
    </table>
    Output
    This is the first cell in first row This is the second cell in first row
    This is the first cell in second row This is the second cell in second row

     

    colspan and rowspan attributes

    colspan attribute will take the number of columns in a row.

    <table border="1">
       <tr>
          <td colspan="2">This cell takes two cells in a row</td>
       </tr>
       <tr>
          <td>This is the first cell in second row</td>
          <td>This is the second cell in second row</td>
       </tr>
    </table>
    Output
    This cell takes two cells in a row
    This is the first cell in second row This is the second cell in second row

    rowspan attribute will take the number of rows in a table.

    <table border="1">
       <tr>
          <td rowspan="2">This is the first cell in first row</td>
          <td>This is the second cell in first row</td>
       </tr> 
       <tr>  
          <td>This is the second cell in second row</td> 
       </tr> 
    </table>
    Output
    This is the first cell in first row This is the second cell in first row
    This is the second cell in second row

    Related Post