Web Design Course – Part 9 – HTML Tables

In this article, I will be covering topic “Web Design – HTML Tables”. We will also write markup for the table tag. The syntax for writing table tag is <table></table>. I will be showing some complex tables in HTML to clear your understanding of its usage with examples.

TABLE STRUCTURE

<table>
  <tr>
     <td>Student Name</td>
     <td>Roll Number</td>
     <td>Attendance</td>
  </tr>
  <tr>
     <td>Ali</td>
     <td>44</td>
     <td>Present</td>
   </tr>
   <tr>
      <td>Amir</td>
      <td>55</td>
      <td>Absent</td>
   </tr>
   <tr>
      <td>Inaam</td>
      <td>53</td>
      <td>Absent</td>
   </tr>
</table>

OUTPUT

TABLE TAG:

<table> represents the start of table. All the other tags are children of this tag and are written in between <table> and </table>.

TABLE ROW TAG:

<tr> represents each row of table.

TABLE DATA TAG:

<td> represents each cell of table.

<table>
   <tr>
     <th></th>
     <th scope="col">Saturday</th>
     <th scope="col">Sunday</th>
   </tr>
   <tr>
     <th scope="row">Baskets sold:</th>
     <td>125</td>
     <td>133</td>
   <tr>
   <tr>
     <th scope="row">Total sales:</th>
     <td>$650</td>
     <td>$700</td>
   </tr>
</table>

OUTPUT

TABLE HEADING TAG:

Used to represent heading either in column or row of table.

COLUMN SPAN:

<table>
   <tr>
     <td>Student Name</td>
     <td>Roll Number</td>
     <td>Attendance</td>
   </tr>
   <tr>
     <td>Ali</td>
     <td>44</td>
     <td>Present</td>
   </tr>
   <tr>
     <td colspan="3">Amir</td>
   </tr>
   <tr>
     <td colspan="2">Inaam</td>
     <td>53</td>
   </tr>
</table>

OUTPUT

The colspan attribute in <td> is used to expand the table cell to more than one column. You can use any number to make it that much lengthy across the table columns.

ROW SPAN:

<table>
  <tr>
   <th></th>
   <th>CN</th>
   <th>PTV</th>
   <th>CNN</th>
  </tr>
  <tr>
   <th>6pm - 7pm</th>
   <td rowspan="2">Movie</td>
   <td>Comedy</td>
   <td>News</td>
  </tr>
  <tr>
   <th>7pm - 8pm</th>
   <td>Sport</td>
   <td>Current Affairs</td>
  </tr>
</table>

OUTPUT

 

The rowspan attribute in <td> is used to expand the table cell to more than one row. You can use any number to make it that much lengthy across the table rows.

<table>
   <thead>
     <tr>
       <th>Month</th>
       <th>Income</th>
       <th>Expenses</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <th>1st January</th>
       <td>400</td>
       <td>36</td>
     </tr>
     <tr>
       <th>2nd January</th>
       <td>266</td>
       <td>48</td>
     </tr>
     <!-- additional rows as above -->
     <tr>
       <th>31st January</th>
       <td>122</td>
       <td>64</td>
     </tr>
    </tbody>
    <tfoot>
     <tr>
       <td></td>
       <td>12356</td>
       <td>1241</td>
     </tr>
    </tfoot>
</table>

OUTPUT

To separate content in HTML table, we can use <thead>, <tbody> and <tfoot> tags.
<thead> tag is the main container for keeping table heading <th> tags inside it.
<tbody> tag is the main container for keeping the content of table i.e; <tr> and <td> inside it.
<tfoot> tag is the main container for keeping the footer tags inside it. It also shows ending of table element.

CONCLUSION:

Almost in all web pages, we see HTML tables. Some tables are simpler and others are complex. You can also use tables efficiently to create a stable User Interface for HTML forms, HTML images and HTML sections.

3 thoughts on “Web Design Course – Part 9 – HTML Tables

  • April 22, 2019 at 1:16 pm
    Permalink

    After reading your blog post, I browsed your website a bit and noticed you aren’t ranking nearly as well in Google as you could be. I possess a handful of blogs myself, and I think you should take a look at “seowebsitetrafficnettools”, just google it. You’ll find it’s a very lovely SEO tool that can bring you a lot more visitors and improve your ranking. They have more than 30+ tools only 20$. Very cheap right? Keep up the quality posts

    Reply
    • May 3, 2019 at 7:07 pm
      Permalink

      Thanks for browsing my website and focusing on the fact that it is not ranked on Google. I like your suggestion and would try this tool you mentioned. Thanks once again, keep the buzz about my blog spreading in your circle.

      Reply
  • July 27, 2019 at 8:37 pm
    Permalink

    It’s very easy to find out any topic on net as compared to
    textbooks, as I found this article at this web site.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *