Coding Journal

Lists

This allows web developers to create ordered lists on their webpages. Lists can be used to create tables of contents, directions, etc. We have tags to differentiate between an unordered list <ul> and an ordered list <ol>. Additionally, we use the <li> tag to list the topics. Here's an example:

An unordered list:
Topic
  
Topic
  
Topic
  
Topic

This is the syntax for an unordered list:

<ul>
  <li>Topic</li>
  <li>Topic</li>
  <li>Topic</li>
  <li>Topic</li>
</ul>

An ordered list:
First Topic
  
Second Topic
  
Third Topic
  
Fourth Topic

This is the syntax for an ordered list:

<ol>
  <li>First Topic</li>
  <li>Second Topic</li>
  <li>Third Topic</li>
  <li>Fourth Topic</li>
</ol>

Tables

We can use tables to arrange information into columns and rows. They can be used to display data in a structured format. First, we should familiarize ourselves with some tags, such as <tr> (table row), <th> (table header), and <td> (table data). Now, let's see how they work. Here's an example:

Countries Data

        
        

          
Country
          
Population
          
Location
        
        

          
United States of America
          
336.803.770
          
North America
        
        

          
Venezuela
          
28,805,984
          
South America
        
      
    
Source:
World Population Review

To understand this table, <th> represents the headers: Country, Population, and Location. The table data is displayed within the <td> tags. The code for the table looks like this:

<table>
  <h2>Countries Data</h2>
  <tr>
    <th>Country</th>
    <th>Population</th>
    <th>Location</th>
  </tr>
  <tr>
    <td>United States of America</td>
    <td>336.803.770</td>
    <td>North America</td>
  </tr>
  <tr>
    <td>Venezuela</td>
    <td>28.805.984</td>
    <td>South America</td>
  </tr>
</table>