Conquer HTML Ep[7]: Lists and Tables

You are currently viewing Conquer HTML Ep[7]: Lists and Tables

Lists:

Lists are a bunch of similar elements grouped together. There are two types of lists in HTML, ordered lists and unordered lists. 

Ordered lists are sequential lists which have numbers written on the left of them in ascending order. It is generally used when the order of elements is important.

Example:

This is an ordered list of three tasks.

  1. Eat
  2. Sleep
  3. Code

Unordered list is a non-sequential list where the sequence of elements is not important. They have bullets on the left of them by default.

Example:

This is an unordered list of three fruits.

  • Apple
  • Mango
  • Banana

In HTML, ordered lists are enclosed inside <ol> tag whereas unordered lists are enclosed inside <ul> tag. Inside these other tags, each element of the list is enclosed inside the <li> tag which is short for ‘list item’.

Example:

<ol>
   <li>Eat</li>
   <li>Sleep</li>
   <li>Code</li>
</ol>

<ul>
   <li>Apple</li>
   <li>Mango</li>
   <li>Banana</li>
</ul>

In your web development journey, you will mostly use lists while making the navigation bar of your website where each menu of the navigation bar will be a list item.

Tables:

Tables are really helpful in showing data in tabular format, HTML provides built in tags to build a simple table in your website.

Entire content of table is stored inside <table></table>, each row is enclosed inside <tr> tag, heading of each column are enclosed inside <th> and each cell of the table is enclosed inside <td>.

Example:

<table>
  <tr>
    <th>ID</th>
    <th>Student</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>128</td>
    <td>Arpit Pandey</td>
    <td>92</td>
  </tr>
  <tr>
    <td>623</td>
    <td>Jake William</td>
    <td>88</td>
  </tr>
</table>

Output:

IDStudentScore
128Arpit Pandey92
623Jake William88

Arpit Pandey

Hey there! I am Arpit Pandey, a full stack web developer, SEO specialist, C++ programmer and Co-Founder of this blog. I love to code and write articles!

Leave a Reply