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.

5 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
  • June 29, 2019 at 10:04 am
    Permalink

    I am really impressed along with your writing talents and also with the layout in your blog.
    Is that this a paid topic or did you customize it yourself?
    Either way keep up the nice quality writing,
    it’s rare to see a great blog like this one today..

    Reply
  • July 1, 2019 at 10:00 pm
    Permalink

    What i do not understood is in truth how you are no longer really a lot more well-liked than you might be right now. You’re so intelligent. You already know thus considerably in terms of this matter, made me individually imagine it from numerous varied angles. Its like men and women aren’t fascinated unless it?¦s one thing to do with Girl gaga! Your own stuffs excellent. Always deal with it up!

    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 *