Tables

HTML tables allows the developer to arrange data into rows and columns.

<table> tag is used to create a table and <tr> tag is used to create table rows and <td> tag is used to create data cells.

<!DOCTYPE html>
<html>
  <head>
    <title>Table</title>
  </head>
  <body>
      <table border = "1">
         <tr>
            <td>Row 1, Col 1</td>
            <td>Row 1, Col 2</td>
            <td>Row 1, Col 3</td>
         </tr>
         
         <tr>
            <td>Row 2, Col 1</td>
            <td>Row 2, Col 2</td>
            <td>Row 2, Col 3</td>
         </tr>
         
         <tr>
            <td>Row 3, Col 1</td>
            <td>Row 3, Col 2</td>
            <td>Row 3, Col 3</td>
         </tr>
      </table>
  </body>
</html>

Try yourself here

You can also define table headings using <th> tag.

<!DOCTYPE html>
<html>
  <head>
    <title>Table example</title>
  </head>
  <body>
      <table border = "3" width = "300" height = "150" cellpadding = "5" cellspacing = "5">
      <caption>Country and it's official language</caption>
         <tr>
            <th>Country</th>
            <th>Capital</th>
         </tr>
         <tr>
            <td>Russia</td>
            <td>Russian</td>
         </tr>
         <tr>
            <td>US</td>
            <td colspan = "2">English</td>
         </tr>
         <tr>
            <td>UK</td>
            <td>English</td>
         </tr>
         <tr>
            <td>Japan</td>
            <td>Japanese</td>
         </tr>
         <tr>
            <td>India</td>
            <td>Hindi</td>
         </tr>
         <tr>
            <td>France</td>
            <td>French</td>
         </tr>
      </table>
  </body>
</html>

Try yourself here

Table attributes

  • Cellpadding and Cellspacing

The two attributes are used to to adjust the white space in your table cells.
* cellspacing attribute: Used to define the space between table cells
* cellpadding attribute: Used to define the distance between cell borders and the content within a cell.

  • Colspan and Rowspan

These two attributes are used to merge cells if required.
* colspan attribute: Used to merge two or more columns into a single column.
* rowspan attribute: Used to merge two or more rows into a single row.

  • Border

Border attribute is used to put a border across all the cells of a table.

  • Height and Width

Table's width and height can be set in terms of pixels or in terms of percentage of available screen area using height and width attributes.

  • Caption

You can set caption to the table using caption attribute.

<!DOCTYPE html>
<html>
  <head>
    <title>Table example</title>
  </head>
  <body>
      <table border = "3" width = "300" height = "150" cellpadding = "5" cellspacing = "5">
      <caption>Country and it's official language</caption>
         <tr>
            <th>Country</th>
            <th>Capital</th>
         </tr>
         <tr>
            <td>Russia</td>
            <td>Russian</td>
         </tr>
         <tr>
            <td>US</td>
            <td rowspan = "2">English</td> <!-- Notice we are merging two rows here-->
         </tr>
         <tr>
            <td>UK</td>
         </tr>
         <tr>
            <td>Japan</td>
            <td>Japanese</td>
         </tr>
         <tr>
            <td>India</td>
            <td>Hindi</td>
         </tr>
         <tr>
            <td>France</td>
            <td>French</td>
         </tr>
      </table>
  </body>
</html>

Try yourself here