Day 5 of 100 Days Web Development Challenge

Welcome, this is the 5^th 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	Topics	Code Link	Blog 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
• <thead> tag
• <tbody> tag

---

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>

---

2. <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:

Day 0 of 100 Days Web Development Challenge

Day 1 of 100 Days Web Development Challenge

Day 2 of 100 Days Web Development Challenge

Day 3 of 100 Days Web Development Challenge

Day 4 of 100 Days Web Development Challenge

---