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.
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:
- 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:
- <thead> tag
- <tbody> tag
- <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>
- <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
Post a Comment
If you have any doubts, Please let me know.