HTML Elements (Tables and List)
Hey reader so, in my past few blogs we learned about the very basics of HTML and also learned a lot about how to write the HTML syntaxes, what I mean was their structure. So let’s do a quick recap at first, we learned about elements, tags, and attributes and we also learned about how an HTML document works. Moving forward, check out the following syntax structure so that we can move forward and learn about using tags.
So, what are we waiting for let’s start ……
Sorry in advance if I scare you in between
Check out the following sub-topics in detail-
- Tables —
As the name goes this element is used to embed an table in your HTML document. Checkout the following syntax for the same.
Syntax -
<table>
<tr>
<th>table R1C1</th>
<th>table R1C2</th>
<th>table R1C3</th>
</tr>
</table>
As you can observe in the above syntax under the table element two more elements have been used as weel which tr and td element. Here the tr element refers to table row, it helps to at first embed a row. Than we have the td element which is used to enter the table data.
Now, sometimes you may wish the first row to be the heading row, for the same their is separate tag for the same, we use th element instead of td in first th element, this element informs the web browser that the first row is the header row but in order to show that this turns the text inside it bold. Also, not only the first row but any element you wish you can just simply replace the td tag with th tag.
(NOTE: the data inside the elements can be any form of data, it can be an image, video, link, etc.)
If you have any header which you want to span upto two columns, you can use colspan element in the th element. Or the to span upto two rows as heading you can add rowspan element.
If you want to add a caption to your table as a heading for the table, you can use the caption element inside the table element.
2. Lists —
As the name goes, we use ul/ol and li elements to embed a list in the HTML document.
Syntax -
<ul>
<li>item</li>
</ul>
Or
<ol type=”1”>
<li>item</li>
</ol>
The ul element is used to define a list which is not ordered. The list is mentioned with bullets or any character with no sequence. The ol is used to define a list which is in a clear sequence. The list is mentioned with numbers, romans or alphabets. In order to define the type of sequence we use type attribute in ol element to mention the sequence type.
Their is another type of list where the item description can also be mentioned.
Syntax -
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Here, dl tag is used to embed this type of list where dt element is used to enter the item names and the following dd tag is used to mention the item description of the respective item.
So, that’s it I know it was a pretty short blog but trust me I covered most of it that are required for you to know about tables and lists in HTML. My upcoming blogs will cover more such topics which I am pretty sure will trigger your knowledge a lot. Also, pardon but I think soon enough I will be starting writing blogs on DSA topics too, though not sure about it, let’s see what the future holds for me oops sorry us.
Thank you for reading and happy coding !!!
