Skip to main content

Day 5 of 100 Days Web Development Challenge

Welcome, this is the 5th day of my 100 days web development challenge. This blog is about what I learnt today, and I have tried to explain it below. Before moving towards today's learnings, lets first look at what i have learnt in last 4 days.


Learnings till now in HTML
   Days   TopicsCode LinkBlog Link
    Day 1     Syntax   Syntax    Blog
    Day 2     Headings and
     Lists
   Headings
   Lists
    Blog
    Day 3     Formatting Tags   Formatting
    Blog
    Day 4     Images   Images    Blog

Topic:


Tables in HTML:

  • Tables are used to store and display data in a presentable format.
  • To make a table like above in html, we use the <table> tag.
  • In table, the data is stored in form of rows and columns.
  • We can add as many data as we want inside a table.
  • Inside the <table> tag, there are two major tags:
    1. <thead> tag
    2. <tbody> tag


  1. <thead> tag:
    • This tag is used to specify the heading of the table column.
    • The heading written in <thead> tag is by default bold.
    • To write the heading of a column, first write the <tr> tag which specifies the table row inside the <thead> tag.
    • Inside the opening and closing <tr> tag write <th> tag which means table heading.
    • Now, inside the opening and closing <th> tag write the column name, for example:
<thead>
            <tr>
                <th>Roll no.</th>
            </tr>
        </thead>

Now add more <th> tag inside the same <tr> tag to specify the next column name.
For example:
<thead>
            <tr>
                <th>Roll no.</th>
                <th>Name</th>
                <th>Marks</th>
            </tr>
        </thead>


  1. <tbody> tag:
    • This tag contains the data of all the columns in a table.
    • The data inside this tag is not in bold like the <thead> tag.
    • The <thead> and <tbody> tags are almost same, but the difference is instead of <th> tag in the <thead> tag we write <td> tag inside <tbody> tag.
    • <td> tag means table data.
    • To add data, first write the <tbody> tag and inside it write the <tr> tag.
    • Now, inside the <tr> tag write <td> tag and inside the <td> tag write the data you want to display. For example:
<tbody>
            <tr>
                <td>1</td>
                <td>Suraj</td>
                <td>80</td>
            </tr>
</tbody>


Now add more table rows with <tr> tag and write more data in <td> tag.
For example:

<tbody>
            <tr>
                <td>1</td>
                <td>Suraj</td>
                <td>80</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Rohan</td>
                <td>73</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Aman</td>
                <td>92</td>
            </tr>
        </tbody>

You can get the full code for this blog on my GitHub and links of all the blogs below.

All Links:






Comments