Lynxsia IT Solution

HTML Tables

HTML tables allow us to arrange data in rows and columns.

Table Tags

To define a table, we use the following tag:

<table> tag: Define the actual table.
<tr> tag: Define the table row.
<td> tag: Define the table cell and stands for table data.
<th> tag: Define the table header cell and stands for table header.

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <table>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                </tr>
                <tr>
                  <td>John</td>
                  <td>john@gmail.com</td>
                </tr>
                <tr>
                  <td>Micheal</td>
                  <td>micheal@gmail.com</td>
                </tr>
              </table>
            </body>
          </html>

Test Code Online

As you can see in the example, the table does not have the border. To define the table border we can use border attribute or border style CSS for table. We recommend to use CSS style for table border.

Border Attribute

					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <table border="1">
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                </tr>
                <tr>
                  <td>John</td>
                  <td>john@gmail.com</td>
                </tr>
                <tr>
                  <td>Micheal</td>
                  <td>micheal@gmail.com</td>
                </tr>
              </table>
            </body>
          </html>

Test Code Online

Border CSS Style

					 
        
          <!DOCTYPE html>
          <html>
            <head>
              <style>
                table, th, td{border: 1px solid #000000}
              </style>
            </head>
            <body>
              <table>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                </tr>
                <tr>
                  <td>John</td>
                  <td>john@gmail.com</td>
                </tr>
                <tr>
                  <td>Micheal</td>
                  <td>micheal@gmail.com</td>
                </tr>
              </table>
            </body>
          </html>

Test Code Online

Learn more about table border in our HTML Table Borders Tutorials

Table Caption

<caption> defines caption for the table

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <head>
              <style>
                table, th, td{border: 1px solid #000000}
              </style>
            </head>
            <body>
              <table>
                <caption>Employe Data</caption>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                </tr>
                <tr>
                  <td>John</td>
                  <td>john@gmail.com</td>
                </tr>
              </table>
            </body>
          </html>

Test Code Online

Table <colgroup> And <col>

<colgroup> and <col> defines the group of column to take action such as styling at once.

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <head>
              <style>
                table, th, td{border: 1px solid #000000}
              </style>
            </head>
            <body>
              <table>
                <colgroup>
                 <col style="background-color: #ffaadd">
                 <col style="background-color: #4ad134">
                </colgroup>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                </tr>
                <tr>
                  <td>John</td>
                  <td>john@gmail.com</td>
                </tr>
              </table>
            </body>
          </html>

Test Code Online

Table Header, Body And Footer

HTML5 allow us to group content of table header, body, and footer with <thead>, <tbody>, and <tfoot> tags respectively.

Let's see with some example

					 
        
          <!DOCTYPE html>
          <html>
            <head>
              <style>
                table, th, td{border: 1px solid #000000}
              </style>
            </head>
            <body>
              <table>
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Email</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>John</td>
                    <td>john@gmail.com</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <th>Name</th>
                    <th>Email</th>
                  </tr>
                </tfoot>
              </table>
            </body>
          </html>

Test Code Online

Learn more about table header in our HTML Table Headers Tutorials

We will learn more about HTML tables such as borders, spacing, size, span, etc. in later tutorials.

View HTML PDF Ebooks

Previous Next

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Ads

HTML Tables

HTML Tables

Table Tags

Let's see with some example

Border Attribute

Border CSS Style

Table Caption

Let's see with some example

Table <colgroup> And <col>

Let's see with some example

Table Header, Body And Footer

Let's see with some example

Report Us

Solutions

Prices

Industries

Resources

Lynxsia IT Solutions