Learn HTML Tables and Lists: Welcome to Ushanand Academy, Now we will discuss about Learn HTML Tables and Lists. HTML tables allow web authors to organize data such as text, images, links, other tables, etc. into rows and columns of columns. Please Read & Learn All Articles of HTML Tutorial Series.

Learn HTML Tables

HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and the <td> tag is used to create data cells. Elements under <td> align regularly and by default.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
      
   </body>
</html>

Here, the boundary is characterized by the <Table> tag and is used to insert boundaries into all cells. If you don’t need a limit, you can use limit = “0“.

Table title

The table title can be defined using the <th> tag. This tag will be placed to replace the <td> tag, which is used to represent the actual data cell.

Usually you can insert your top row as the table head as shown below, otherwise you can use the <th> element in any row. Headings, which are defined in the <th> tag, are centered and bold by default.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
   
</html>

Cellpad and CellSpacing Facility

There are two features called cellpadding and cellspacing that you will use to adjust the white space in your table cells.

The cell spacing attribute table defines the space between cells, while cellpadding represents the distance between cell boundaries and the contents within a cell.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
	
   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
	
</html>

Colspan and raspon properties

If you want to merge two or more columns into a single column, you will use the CallSpan attribute. If you want to merge two or more rows, you will use the same light.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Table background

You can set the table background using one of the following two methods –

bgcolor attribute: You can set the background color for the entire table or for just one cell.
Background Feature: You can set the background image for the entire table or for just one cell.

You can also set the border color with the border color feature.

Note – bgcolor, background and border color features are shown in HTML5. Do not use these features.

Here is an example of using the background attribute. Here we will use the image available in/image directory. This will produce the following result. The background image here does not apply to the table header.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Table height and width

You can set a table width and height using the width and height attributes. You can specify the width or height of the table in terms of pixels or as a percentage of the available screen area.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Width/Height</title>
   </head>
	
   <body>
      <table border = "1" width = "400" height = "150">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
   </body>
	
</html>

Table caption

The caption tag will serve as a title or explanation for the table and it appears at the top of the table. This tag is shown in the new version of HTML/XHTML.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Caption</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <caption>This is the caption</caption>
         
         <tr>
            <td>row 1, column 1</td><td>row 1, columnn 2</td>
         </tr>
         
         <tr>
            <td>row 2, column 1</td><td>row 2, columnn 2</td>
         </tr>
      </table>
   </body>
	
</html>

Table Header, Body, and Footer

Tables can be divided into three parts – a header, a body and a leg. The head and feet are similar to the headers and footers in a word-processed document that remains the same for each page, while the body is the main content holder of the table.

The table has three elements separating the head, body and legs –

<thead> – used to create a separate table header.
<tbody> – used to indicate the main body of the table.
<tfoot> – used to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it’s worth noting that the <thead> and <tfoot> tags should be displayed before <tbody>

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>
         
         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>
         
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody>
         
      </table>
   </body>
	
</html>

Nested table

You can use one table inside another table. Not just tables, you can use almost all tags inside the table data tag <td>.

Examples:
The following table is an example of using another table and other tags inside a table.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <tr>
                     <th>Name</th>
                     <th>Salary</th>
                  </tr>
                  <tr>
                     <td>Ramesh Raman</td>
                     <td>5000</td>
                  </tr>
                  <tr>
                     <td>Shabbir Hussein</td>
                     <td>7000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
	
</html>

Learn HTML Tables and Lists

Learn HTML Lists

HTML provides web writers with three ways to specify lists of information. All lists must have one or more list elements. The list may include –

<ul> – An unordered list. It will list items using plain tablets.
<ol> – An ordered list. It will use different schemes of numbers to list your items.
<dl> – A definition list. It organizes your items in the same way that they are organized in a dictionary.

HTML unordered list

An unordered list is a collection of related items with no particular order or sequence. This list is created using the HTML <ul> tag. Each item in the list is marked with a bullet.

For Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
   
</html>

Type attribute

You can use the Type attribute for the <ul> tag to specify the type of bullet you prefer. By default, it is a disk. Following are the possible options –

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

For Examples: The following is an example where we used <ul type = “square”>.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

For Examples: The following is an example where we have used <ul type = “disk”> –

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

For Examples: The following is an example where we have used <ul type = “circle”> –

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
	
</html>

Ordered HTML lists

If you need to place your item in place of a bulleted list, the HTML ordered list will be used. This list is created using the <ol> tag.

The numbering starts with one and grows from a sorted sort list element that is tagged with Lee.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

Type attribute

You can use the type of <ol> tag to specify the type of your choice. By default, this is a number. Following are the possible options –

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

For Examples: The following is an example where we used <ol type = “1”>

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

For Examples: The following is an example where we have used <ol type = “I”>.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

For Examples: The following is an example where we used <ol type = “i”>

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

For Examples: The following is an example where we have used <ol type = “A”>.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

For Examples: The following is an example where we have used <ol type = “a”>.

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Start attribute

You can use the start attribute for the <ol> tag to specify the starting point for the number you need. Following are the possible options –

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

For Examples: The following is an example where we have used <ol type = “i” start = “4”>.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

HTML definition lists

HTML Tables and Lists: HTML and XHTML support a list style called definition lists where the entries are listed like a dictionary or encyclopedia. The definition list is the ideal way to introduce a dictionary, list of words, or other name / value list.

The following three tags are used in the definition list.

<dl> – Defines the beginning of the list
<dt> – One word
<dd> – Term Definition
</dl> – Defines the end of the list

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

Learn HTML Tables

Table title

Cellpad and CellSpacing Facility

Colspan and raspon properties

Table background

Table height and width

Table caption

Table Header, Body, and Footer

Nested table

Learn HTML Lists

HTML unordered list

Type attribute

Ordered HTML lists

Type attribute

Start attribute

HTML definition lists

You Might Also Like

HTML Tutorial Series

HTML Phrase Tags and Meta Tags

HTML Images and Comments

Leave a Reply Cancel reply