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>

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>

 

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>

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>