Blog

Definition Lists

A description list is defined by <dl> tag along with the <dt> and <dd> tags. Where <dt> tag defines the definition term, and <dd> tag defines the corresponding definition.

HTML Definition Lists

HTML definition lists define list items having the structure of terms and their corresponding definitions. These types of lists are used to define a listing structure where each list item (data term) contians its corresponding explanation (definition description).

The <dl> tag supports almost all browsers. It also supports the global attributes and event attributes. It consists of open and closing tags like <dl></dl>

Definition List Tags

The following are the HTML tags used for defining definition lists:

<dl>: This tag defines the definition list.
<dt>: This tag defines the description term.
<dd>: This tag defines the corresponding description for the given definition term.

Creating Definition List

To create a definition list, you need to use the <dl> tag along with the <dt> and <dd> tags.

Where,

<dl> is used as a container tag for the definition list.
<dt> is used to define the terms that you want to define.
<dd> is used to place the definitions for the corresponding terms.

Syntax

Below is the syntax (structure) of creating a definition list in HTML:

<dl><dt>Term 1</dt><dd>Definition for Term 1</dd><dt>Term 2</dt><dd>Definition for Term 2</dd><dt>Term 3</dt><dd>Definition for Term 3</dd></dl>

Example of Definition List

In the following example, we are creating a definition list with four terms along with their corresponding descriptions:

<!DOCTYPE html><html><body><h2>Different Types Of Languages</h2><dl><dt>English:</dt><dd>
  English is the first world language. We can 
  use English language for communication in all 
  areas like politics, media, entertainment, 
  art etc.   </dd><dt>Hindi:</dt><dd>
  Hindi is an Indo-Aryan language spoken mostly 
  in India. In India Hindi is spoken as a first 
  language by most of the people.   </dd><dt>Marathi:</dt><dd>
  Marathi is an Indo-Aryan language spoken by 
  Marathi people of Maharashtra in India. It 
  is a official Language of Maharashtrian 
  people   </dd><dt>French:</dt><dd>
  French is the official language in Canada, 
  Central, African, Burkina, Faso, Burundi etc.
   </dd></dl></body></html>

Styling Definition Lists

You can also customize the default appearance of the definition lists using the CSS properties. You can apply the CSS styles on all three definition list tags to style them as per your requirement to match with the website theme.

Example

In the following example, we are applying CSS properties to customize the appearance of the definition list:

<!DOCTYPE html><html><head><style>
  body {
     font-family: Arial, sans-serif;
     margin: 20px;
  }
  dl {
     background-color: #f9f9f9;
     border: 1px solid #ddd;
     padding: 20px;
     border-radius: 5px;
     max-width: 400px;
     margin: 0 auto;
  }
  dt {
     font-weight: bold;
     color: #333;
     margin-top: 10px;
  }
  dd {
     margin: 0 0 10px 20px;
     color: #555;
  }
   </style></head><body><dl><dt>Tutorialspoint</dt><dd>
  Tutorialspoint provides access to a library 
  of video courses on various prominent 
  technologies, aimed at helping individuals 
  master those technologies and become 
  certified professionals.   </dd><dt>Tutorix</dt><dd>
  Tutorix is child company of tutorialspoint 
  that covers NCERT-based syllabus for maths 
  and science. Also give a great foundation 
  for IIT/JEE and NEET aspirants.
   </dd></dl></body></html>

Default CSS for Definition Lists

There are default CSS settings for almost all browsers that display the<dl> elements.

Example

The following code constains the default CSS properties for the definition list. If you remove them, nothing will change in output:

<!DOCTYPE html><html><head>
   &lt!-- This is default style of Definition Lists -->
   <style>
  dl {
     display: block;
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 0;
     margin-right: 0;
  }   </style></head><body><dl><dt>Definition List</dt><dd>
     A list of terms and their definitions.
  &lt;/dd&gt;&lt;dt&gt;Android&lt;/dt&gt;&lt;dd&gt;Android tutorial.&lt;/dd&gt;&lt;dt&gt;Ruby&lt;/dt&gt;&lt;dd&gt;Ruby tutorial.&lt;/dd&gt;&lt;/dl&gt;&lt;p&gt;
  We added default style to Description List
   </p></body></html>

Nested Definition Lists

Nested definition lists allow you to add detailed sub-definitions within a main definition term.

Example

The following example demonstrates the nested definition lists in HTML:

<!DOCTYPE html><html lang="en"><head><title>Nested Definition Lists Example</title></head><body><h2>Nested Definition Lists Example</h2><dl><dt>Programming Languages</dt><dd><dl><dt>Python</dt><dd>A high-level, interpreted programming language.</dd><dt>JavaScript</dt><dd>A language used for web development.</dd></dl></dd><dt>Web Technologies</dt><dd><dl><dt>HTML</dt><dd>The standard markup language for creating web pages.</dd><dt>CSS</dt><dd>Used for styling web pages.</dd></dl></dd></dl></body></html>

August 16, 2025

Ordered Lists

An ordered list is defined by <ol> tag where all list items are marked an ordered list.

Ordered HTML Lists

An ordered list is a collection of items that have a specific order or sequence. HTML ordered list is created by <ol> tag where each list item is defined by the <li> tag.

This type of ordered list is used to show the list items, where they are marked with an ordered numbered list, such as the steps of a recipe, the ranking of a leaderboard, or the chronological order of events as shown in the below figure:

Creating Ordered Lists

To create an ordered list in HTML, we use the <ol> tag and nest <li> tags inside it. Each <li> element represents one item in the list. The numbering starts with 1 and is incremented by one for each successive ordered list element tagged with <li>. Like an unordered list, it also allows us to change the numbering style using the type attribute of the <ol> element.

Example

The following example demonstrates creating ordered lists in HTML:

<!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>

If you click on Edit & Run the above example displays an ordered list.

HTML Ordered List – The type Attribute

Thetype attribute for the<ol> tag is used to specify the type of marker for the ordered list in HTML. By default, the type of list numbering is numbers starting with 1, 2, 3, and so on. You can change the type of numbers by using any of the values given below:

S.No	Value & Description
1	1It is the default type of marker.
2	IList items will be displayed with roman number marker.
3	AIt will set the marker to upper case alphabets.
4	aIt sets the marker to lower case alphabets.

Ordered List With Numbers

The following example demonstrates the ordered lists with numbers type marker:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with counting numbers:</p><ol type="1"><li>Beetroot</li><li>Ginger</li><li>Potato</li><li>Radish</li></ol></body></html>

Ordered List With Uppercase Roman

The following example demonstrates the ordered lists with uppercase roman numbers type marker:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with uppercase roman numbers:</p><ol type="I"><li>Aman</li><li>Vivek</li><li>Shrey</li><li>Ansh</li></ol></body></html>

Ordered List With Lowercase Roman

The following example demonstrates the ordered lists with lowercase roman numbers type marker:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with lowercase roman numbers:</p><ol type="i"><li>Aman</li><li>Vivek</li><li>Shrey</li><li>Ansh</li></ol></body></html>

Ordered List With Uppercase Alphabets

The following example demonstrates the ordered lists with uppercase alphabets type marker:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with uppercase alphabets:</p><ol type="A"><li>Bus</li><li>Train</li><li>Plane</li><li>Boat</li></ol></body></html>

Ordered List With Lowercase Alphabets

The following example demonstrates the ordered lists with lowercase alphabets type marker:

<!DOCTYPE html><html><head><title>HTML Ordered List</title></head><body><p>Ordered list with lowercase alphabets:</p><ol type="a"><li>Bus</li><li>Train</li><li>Plane</li><li>Boat</li></ol></body></html>

The above examples display ordered lists with counting numbers, roman numbers, and alphabets.

HTML Ordered List – The start Attribute

By default, the numbering starts with 1, but you can change it by using the start attribute with the <ol> tag. The style attribute defines the starting numbers of the ordered list.

Syntax

The following are the different syntaxes (use cases) to define number types and the initial (starting) number for the ordered list:

<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.

Example

Following is an example where we 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>

Styling HTML Ordered List

Styling ordered lists with CSS allows customization of the appearance to match the design preferences of a website. The CSS styles can target both the list itself (<ol>) and the list items (<li>).

Example

Below is the program example that includes all the CSS styling for ordered list:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Styled Ordered List</title><style>
  /* Basic Styling */
  ol {
     color: navy;
     font-family: 'Arial', sans-serif;
     margin-left: 20px;
  }
  li {
     font-size: 16px;
     margin-bottom: 8px;
  }
  /* Changing Numbering Style */
  ol.roman {
     list-style-type: upper-roman;
  }
  ol.letters {
     list-style-type: upper-alpha;
  }
  /* Adding Counters */
  ol.counter-list {
     counter-reset: my-counter;
  }
  ol.counter-list li {
     counter-increment: my-counter;
  }
  ol.counter-list li::before {
     content: counter(my-counter) '. ';
  }
  /* Changing Text Color on Hover */
  li.hover-effect:hover {
     color: #e44d26;
  }
   </style></head><body><h1>Styled Ordered List Example</h1><h2>Basic Styling</h2><ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol><h2>Changing Numbering Style</h2><ol class="roman"><li>Roman I</li><li>Roman II</li><li>Roman III</li></ol><ol class="letters"><li>Letter A</li><li>Letter B</li><li>Letter C</li></ol><h2>Adding Counters</h2><ol class="counter-list"><li>Item</li><li>Item</li><li>Item</li></ol><h2>Changing Text Color on Hover</h2><ol><li class="hover-effect">Hover Effect 1</li><li class="hover-effect">Hover Effect 2</li><li class="hover-effect">Hover Effect 3</li></ol></body></html>

The program creates a styled HTML document with ordered lists. It includes basic styling, changes numbering styles to Roman and letters, adds counters to items, and changes text color on hover.

Nested Ordered Lists

HTML allows nesting of lists; you can create nested ordered lists to display a list of items inside an item of the outer list element.

Note: You can also change the type of outer or inner lists. In the below example, the main list has decimal numbers, the list of the second list item has lowercase roman numbers, and the list of the third list item has uppercase roman numbers. You can also define the starting number as per your requirement.

Example

The following example deonstartes the use of nested ordered lists:

<!DOCTYPE html><html><head><title>Nested Ordered Lists</title></head><body><h2>Example of Nested Ordered Lists</h2><ol><li>Fruits
&lt;ol&gt;&lt;li&gt;Apple&lt;/li&gt;&lt;li&gt;Banana&lt;/li&gt;&lt;li&gt;Orange&lt;/li&gt;&lt;/ol&gt;&lt;/li&gt;&lt;li&gt;Vegetables
&lt;ol type="i"&gt;&lt;li&gt;Carrot&lt;/li&gt;&lt;li&gt;Broccoli&lt;/li&gt;&lt;li&gt;Spinach&lt;/li&gt;&lt;/ol&gt;&lt;/li&gt;&lt;li&gt;Dairy
&lt;ol type="I"&gt;&lt;li&gt;Milk&lt;/li&gt;&lt;li&gt;Cheese&lt;/li&gt;&lt;li&gt;Yogurt&lt;/li&gt;&lt;/ol&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 16, 2025

Unordered Lists

An HTML unordered list is defined by <ul> tag where all list items are marked with bullets.

Unordered HTML Lists

An unordered list is a collection of list items that do not have a specific order or sequence and are marked with the bullets. An HTML unordered list is created by <ul> the tag, where each list item is defined by the <li> tag.

This type of list is used for describing a particular service or product, as it does not require any order to be followed.

The below figure shows an ordered list of groceries: Unordered Lists

Creating Unordered Lists

To create an unordered list in HTML, we use the <ul> tag and nest <li> tags inside it. Each <li> element represents one item in the list. By default, the browser will automatically display disc bullet points for each item. However, we can change this bullet style using the type attribute on the <ul> element.

Example

The following example demonstrates how to create an unordered list in HTML:

<!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>

The above example displays an unordered list with default disc bullets.

HTML Unordered List – Specifying List Marker

The type attribute for the <ul> tag is used to specify the type of bullet for the unordered list in HTML. By default, disc bullet type is used. But we can change this with the help of the following options:

S.No	Value & Description
1	discIt is the default type of marker.
2	squareList items will be displayed with a square marker.
3	circleIt will set the marker to a hollow circle.

Disc Marker

The following example illustrates disc marker with an unordered list in HTML:

<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><p>An unordered list with default disc marker:</p><ul type="disc"><li>Apple</li><li>Guava</li><li>Carrot</li><li>Orange</li></ul></body></html>

Square Marker

The following example illustrates square marker with an unordered list in HTML:

<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><p>An unordered list with square marker:</p><ul type="square"><li>Nuts</li><li>Oats</li><li>Eggs</li><li>Dates</li></ul></body></html>

Circle Marker

The following example illustrates circle marker with an unordered list in HTML:

<!DOCTYPE html><html><head><title>HTML Unordered List</title></head><body><p>An unordered list with hollow circle marker:</p><ul type="circle"><li>Rice</li><li>Pulses</li><li>Flour</li><li>Beans</li></ul></body></html>

The above examples display three unordered lists with default disc bullets, square and hollow circular bullets.

HTML Unordered List Without Bullets

You can also display the list items of an unordered list without showing the bullets. To display an unordered list without bullets, define the “none” to the list-style-type property.

Syntax

Following is the syntax to create an unordered list without bullets in HTML:

<ul style="list-style-type: none"><li>Item in list...</li><li>Item in list...</li><li>Item in list...</li></ul>

Example

Given below is an example of creating an unordered list without bullets in HTML:

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><ul style="list-style-type: none"><li>Abdul</li><li>Jason</li><li>Yadav</li></ul></body></html>

The above program creates an unordered list that contains elements Abdul, Jason, and Yadav without bullets.

Styling Unordered HTML Lists

Styling an unordered list (<ul>) using CSS allows for customization of the list’s appearance, including modifying bullet points, spacing, and overall design.

Example

Below is the program example:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Styled Unordered List</title><style>
  ul {
     list-style-type: square;
     /* Custom bullet type */
     padding: 0;
     /* Removes default padding */
  }
  li {
     margin-bottom: 8px;
     /* Adds spacing between list items */
     background-color: #f0f0f0;
     /* Background color */
     border: 1px solid #ccc;
     /* Border */
     padding: 8px;
     /* Padding inside each list item */
     transition: background-color 0.3s;
     /* Smooth transition effect */
  }
  li:hover {
     background-color: #e0e0e0;
     /* Change background on hover */
  }
   </style></head><body><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></body></html>

The above program styles an unordered list with a square bullet. Each list item has a background color, border, and padding, creating a distinct card-like appearance. The items are separated by a margin, and hovering over an item triggers a smooth background color transition.

Nested Unordered Lists

HTML allows nesting of lists; you can create nested unordered lists to display a list of items inside an item of the outer list element.

Example

The following example deonstartes the use of nested unordered lists:

<!DOCTYPE html><html><head><title>Nested Unordered Lists</title></head><body><h2>Example of Nested Unordered Lists</h2><ul><li>Fruits
&lt;ul&gt;&lt;li&gt;Apple&lt;/li&gt;&lt;li&gt;Banana&lt;/li&gt;&lt;li&gt;Orange&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;Vegetables
&lt;ul&gt;&lt;li&gt;Carrot&lt;/li&gt;&lt;li&gt;Broccoli&lt;/li&gt;&lt;li&gt;Spinach&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;Dairy
&lt;ul&gt;&lt;li&gt;Milk&lt;/li&gt;&lt;li&gt;Cheese&lt;/li&gt;&lt;li&gt;Yogurt&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 16, 2025

Lists

HTML lists are group or collection of items. These items can be both organized and unorganized depending on the requirement. They help in organizing, structuring, and presenting information to make it more user-friendly, readable, and accessible. Sample lists are shown below. −

Using Lists in HTML

To display a list of information in HTML, we use various list tags like <ul>, <ol>, and <ll>. HTML offers web developers three ways for specifying lists of information, namely ordered, unordered, and definition lists. All lists must contain one or more list elements. In addition to the mentioned types of lists, there are some other important list-related elements and concepts that also contribute to effective document structuring.

Unordered lists

Unordered lists display lists of items that are not in a specific order. The unordered lists are marked with bullet points. To create an unordered list, the <ul> tag is used along with the <li> tag. Here, the <li> tag specifies the list items.

Example

The following example demonstrates an unordered listing. Here, we are creating a list of 5 items:

<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Java</li><li>JavaFX</li></ul></body></html>

Ordered Lists

Ordered lists are lists of items that are in a specific order. The ordered lists are marked with numbers by default; you can change the numbers into alphabets, roman numbers, etc. by using the type attribute or the CSS list-style-type property.

To create an ordered list, the <ol> tag is used along with the <li> tag, where <li> specifies the list items.

Example

The following example demonstrates an ordered list having the list of 5 items:

<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><ol><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Java</li><li>JavaFX</li></ol></body></html>

Definition Lists

Definition lists are lists of items with their corresponding descriptions. The definition lists are created by using the <dl>, <dt>, and <dd> tags. Where the <dl> tag specifies the “definition list”, the <dt> tag specifies the “definition term”, and the <dd> tag specifies the “definition description”.

Example

The following example demonstrates the definition list in HTML; here we are creating a definition list with three items:

<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML List</h2><dl><dt>HTML</dt><dd>HyperText markup languague</dd><dt>CSS</dt><dd>Cascading Style Sheet</dd><dt>JS</dt><dd>JavaScript</dd></dl></body></html>

Nested Lists

A list created within another list is known as a nested list. HTML also allows nesting of lists within one another to generate complex document structures.

Example

In the following example, we are nesting an unordered list within an ordered list:

<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Example of HTML Nested List</h2><ol><li>Item One</li><li>Item Two
     &lt;ul&gt;&lt;li&gt;Subitem A&lt;/li&gt;&lt;li&gt;Subitem B&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;Item Three&lt;/li&gt;&lt;/ol&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Grouping Lists Inside <div> Tag



To enhance styling and layout, lists are often wrapped inside the <div> elements. This grouping aids in applying consistent styles and creating visually appealing list structures.



Example



In this example, we are grouping unordered lists with a div tag:



<!DOCTYPE html><html><head><title>HTML List</title></head><body><h2>Grouping of HTML List elements with div tag</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>



Styling Lists



Lists can be styled using CSS to enhance visual presentation. Custom styles can be applied to list items, creating unique and visually appealing designs. For this, we use the <style> tag, which is a way of specifying internal CSS.



Example



The following example demonstrates how to apply CSS to the HTML list using a style tag:



<!DOCTYPE html><html><head><title>HTML List</title><style>
  li {
     font-size: 16px;
  }
  div {
     color: red;
  }
   </style></head><body><h2>HTML List with CSS</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>



HTML Lists Marker Types



CSS allows customization of marker types for list items. To do so, we use the CSS list-style-type property, which can be set to change markers to circles, squares, or other symbols.



Example



In this example, we are using the list-style-type property of CSS to set the markers of list items:



<!DOCTYPE html><html><head><title>HTML List</title><style>
  li {
     font-size: 16px;
     list-style-type: square;
  }
   </style></head><body><h2>HTML list-style-type Property</h2><div><p>First List</p><ol><li>Item One</li><li>Item Two</li></ol></div><div><p>Second List</p><ol><li>Item Three</li><li>Item Four</li></ol></div></body></html>

August 16, 2025

Nested Tables
Nested Tables

HTML nested tables refer to the table where one or more tables are placed inside it; the inner tables are placed inside the <td> tag. The nested tables involve the utilization of one table within another, providing a versatile way to structure complex data layouts. Various elements, including other HTML tags, can be incorporated within table cells (<td>).

Not only can tables be nested, but various HTML tags can also be used within the <td> (table data) tag for arranging contents in a structured manner.

Basic Structure of Nested Tables

Nested tables refer to the practice of embedding an entire table structure within a cell of another table. This technique allows for the creation of more complex and structured layouts in HTML.

See this image of how a nested table looks like i.e., this image demonstartes a structure of nested tables:

How To Create a Nested Table?

You can create a nested table in HTML by creating one or more tables in different table cells. The following are the steps to create an HTML nested table:

Step 1: Create Outer Table

Begin by creating the outer table, which serves as the container.
```
<table border="1"></table>
```
Step 2: Define Rows and Columns

Within the outer table, define the necessary rows and columns.
```
<tr><td></td></tr>
```
Step 3: Embed Inner Table

Inside the cell, embed a new table structure using the <table> tags.
```
<td><table border="1"></table></td>
```
Step 4: Define Inner Table Content

Within the inner table, define rows and columns as needed.
```
<tr><td>Inner Content</td></tr>
```
Step 5 – Close Tags

Ensure proper closure of all HTML tags.
```
</table>
```
Example of Nested Tables

Following is an example by following the above steps −
```
<!DOCTYPE html><html><head><title>Nested Tables</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>
```
Tables Within Cells

Tables can be nested within table cells, allowing for complex structures.

Example

The following example creates a table with two columns (Name and Salary). Inside the first column, there’s a nested table displaying employee details with the same columns.

The outer table’s header and data rows are defined, and the inner table showcases two employees, Ramesh Raman, and Shabbir Hussein, with corresponding salaries.
```
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><table border="1"><tr><th>Name</th><th>Salary</th></tr><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>
```
Styling Nested Tables

You can apply styles to nested tables just like regular tables to enhance visual appearance. To write CSS styles for nested tables, you can simply apply the CSS rules on the ‘table‘ selector to style the outer table and use the ‘table table‘ selector to style the inner tables.

Example

The following code includes a main table styled with CSS properties. The <a href="https://www.tutorialspoint.com/css/css_border-collapse.htm" target="_blank" rel="noreferrer noopener">border-collapse</a> ensures seamless borders, and ‘width: 100%’ makes it responsive. Cells (<td>, <th>) have padding, border, and text alignment.

Additionally, nested tables within cells inherit a distinctive style, including a colored background and borders. The main table’s data cell contains a nested table with a blue border, 80% width, and centered using ‘margin: 10px auto’.
```
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Nested Tables with CSS Styles</title><style>
  table {
     border-collapse: collapse;
     width: 100%;
  }
  td,
  th {
     border: 1px solid #dddddd;
     text-align: left;
     padding: 8px;
  }
  /* Additional styles for nested tables */
  table table {
     border: 2px solid #3498db;
     width: 80%;
     margin: 10px auto;
  }
  table table td {
     background-color: #ecf0f1;
     border: 1px solid #bdc3c7;
  }
   </style></head><body><table border="1"><tr><th>Name</th><th>Salary</th></tr><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>
```
Images in Nested Tables

Embedding images within nested tables enhances visual presentation. Use the <img> tag inside table cells to seamlessly integrate images into complex layouts like nested tables.

Example

The following example illustrates the use of images inside nested tables:
```
<!DOCTYPE html><html><head><title>Nested Tables</title></head><body><table border="1" width="100%"><tr><td><table border="1" width="100%"><tr><th>Image </th><th>Name</th></tr><tr><td><img src="images\logo.png" alt="Nested Image"></td><td>LOGO </td></tr><tr><td><img src="images\html5_icon.png" alt="Nested Image"></td><td>HTML5 </td></tr></table></td></tr></table></body></html>
```
Benefits of Nested Tables

Following are the advantages of the nested tables −
- Organized Layouts − Nested tables enable the creation of organized and structured layouts, enhancing the presentation of complex data.
- Cell Customization − Each cell in a nested table can contain diverse content, including text, images, or even additional nested tables.
- Complex Designs − Achieve intricate design patterns by nesting tables within cells, providing flexibility in webpage design.
August 16, 2025

Table Colgroup

HTML Table Colgroup

In HTML, the <colgroup> element is used to define a group of columns in a table. It allows you to apply properties to multiple columns simultaneously, providing a more efficient way to style or format columns.

The <colgroup> Tag

The <colgroup> is often used in conjunction with the <col> element, where each <col> tag represents an individual column within the group. This grouping enhances readability and simplifies the application of styles or attributes to specific columns in a table.

Syntax

Following is the syntax to use <colgroup> with <table> tag:

<table><colgroup><col span="value" style="width: ...;"><col style="..."><!-- More <col> elements... --></colgroup><!-- Other table elements such as <thead>, <tbody>, ... --></table>

Using <colgroup> Tag in HTML Table

Using <colgroup> in HTML involves the following steps −

1. Insert `<colgroup>` Tag

Place the <colgroup> tag within the <table> element, usually inside the <thead> (table head) or <tbody> (table body) section.

<table><colgroup><!-- Column definitions --></colgroup><thead><!-- Table headers --></thead><tbody><!-- Table rows --></tbody></table>

2. Define Columns

Inside the <colgroup> tag, use one or more <col> tags to represent each column. Specify attributes or styles for the columns within these <col> tags.

<table><colgroup><col><col><col></colgroup><!-- Table content --></table>

3. Apply Attributes or Styles

Define attributes or styles for the columns by adding attributes such as span, width, style, or class to the <col> tags.

<table><colgroup><col style="background-color: lightgrey;" span="2"><!-- First two columns --><col style="background-color: lightblue;"><!-- Third column --></colgroup><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table>

Example of HTML Table Colgroup

In this example, the <colgroup> tag defines two columns with different widths, and the styles are applied to the columns using the <col> tags. The second row in the table is highlighted using a CSS class.

<!DOCTYPE html><html><body><table border=1><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th>Column 1</th><th>Column 2</th></tr></thead><tbody><tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td></tr><tr class="highlight"><td>Row 2, Col 1</td><td>Row 2, Col 2</td></tr></tbody></table></body></html>

CSS Properties for <colgroup> Tag

In HTML, the <colgroup> element allows some specific CSS properties to enhance the presentation of table columns. The legal CSS properties that can be used within a <colgroup> are as follows −

width Property − This property sets the width of the columns within the <colgroup>. It allows you to define the relative or absolute width of each column.
visibility Property − The visibility property can be used to control the visibility of columns within the <colgroup>. You can set it to “hidden” to make a column invisible.
Background Properties − Background properties, such as background-color, can be applied to add background styling to the columns. This can enhance the visual appeal of the table.
Border Properties − Border properties, like border-color and border-width, enable the customization of borders around the columns. This is useful for creating well-defined visual boundaries.

Attempting to apply other CSS properties will have no impact on the styling of the table columns. Therefore, when styling tables with <colgroup>, focus on the available properties to achieve the desired layout and appearance.

Example

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
  table {
     width: 100%;
     border-collapse: collapse;
  }
  colgroup {
     /* Setting width for columns */
     width: 20%;
     background-color: #f0f0f0;
     /* Background color for columns */
     visibility: visible;
     /* Making columns visible */
     border: 2px solid #3498db;
     /* Border around columns */
  }
  col {
     /* Additional styling for individual columns */
     background-color: #ecf0f1;
     border: 1px solid #bdc3c7;
  }
  td,
  th {
     border: 1px solid #dddddd;
     text-align: left;
     padding: 8px;
  }
   </style></head><body><table><colgroup><col><col style="width: 30%;"><col></colgroup><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 4</td><td>Data 5</td><td>Data 6</td></tr></tbody></table></body></html>

Multiple Col Elements

Certainly! The <colgroup> element in HTML allows you to group a set of columns in a table and apply styles to them collectively. Within <colgroup>, you can use multiple <col> elements to define different styles for individual columns.

Example

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
  col {
     /* Additional styling for individual columns */
     background-color: #ecf0f1;
     border: 1px solid #bdc3c7;
  }
   </style></head><body><table border=5><colgroup><col style="width: 20%;"><col style="width: 30%;"><col style="width: 50%;"></colgroup><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 4</td><td>Data 5</td><td>Data 6</td></tr></tbody></table></body></html>

The <colgroup> contains three <col> elements, each with a specific ‘width’ style, defining the width of individual columns.

Empty Column groups

In HTML, a <colgroup> element can be used to define a group of columns in a table. An empty <colgroup> can be employed to provide a structural placeholder for potential styling or later use. While it doesn’t contain explicit <col> elements, it can still influence the overall structure of the table.

Example

Here’s a simple example demonstrating the use of an empty <colgroup>. In here, the <colgroup> is empty but serves as a placeholder for potential styling. The entire <colgroup> is styled with a background color and a border. The <col> elements are not explicitly used, but their styling can be defined within <colgroup> for future use or consistency in the structure.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
  colgroup {
     /* Styling for the colgroup (can be empty) */
     background-color: #f0f0f0;
     /* Background color for the entire colgroup */
     border: 2px solid #3498db;
     /* Border around the entire colgroup */
  }
  /* Additional styling for individual columns */
  col {
     background-color: #ecf0f1;
     border: 1px solid #bdc3c7;
  }
   </style></head><body><table border=3><colgroup></colgroup><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr><tr><td>Data 4</td><td>Data 5</td><td>Data 6</td></tr></tbody></table></body></html>

August 16, 2025

Table Styling
You can style HTML tables by using the CSS. Table styling helps you to customize the normal appearance of the elements like borders, cell padding, text alignment, background colors, and more to create a well-formatted table on a webpage.

The following are some of the table stylings in HTML:
- Collapsed Border Table
- Horizontal Zebra Striped Table
- Text Alignment in Table Cells
- Vertical Zebra Striped Table
- Table with Combined Vertical and Horizontal Zebra Stripes
- Table with Horizontal Dividers
- Hoverable Table Rows
Collapsed Border Table

You have the flexibility to manage the space between table borders by manipulating the ‘border-collapse’ property. This property determines how adjacent table cell borders interact, and adjusting it allows you to control the spacing or gap between the borders within your table.

By setting ‘border-collapse’ to “collapse”, borders will merge, eliminating any spacing, while “separate” allows you to control the spacing using the ‘border-spacing’ property, providing a more customized appearance to your table layout.

Example

This is an example of a collapsed border table, where the table borders are merged into a single border using the border-collapse: collapse; property.
```
<!DOCTYPE html><html><head><style>
  #table1 {
     border-collapse: separate;
  }
  #table2 {
     border-collapse: collapse;
  }
   </style></head><body><table id="table1" 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><br /><table id="table2" 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>
```
Horizontal Zebra Striped Table

The Zebra Stripes – Horizontal technique involves styling table rows with alternating colors, enhancing the visual appeal and readability of the table.

The :nth-child(even) selector targets every second row, and a background color is applied to create a striped effect.

Example

This is an example of a horizontal zebra-striped table, here alternating rows are styled with different background colors:
```
<!DOCTYPE html><html><head><style>
  tr:nth-child(even) {
     background-color: #8a83de;
  }
   </style></head><body><table border="1"><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></table></body></html>
```
Text Alignment in Table Cells

You can align the text within your table cells horizontally and vertically using the text-align and vertical-align properties.

Example

This is an example of text alignment in table cells:
```
<!DOCTYPE html><html><head><style>
  td,
  th {
     text-align: center;
     vertical-align: middle;
  }
   </style></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>
```
Vertical Zebra Striped Table

The Zebra Stripes – Vertical technique enhances table readability by applying alternating styles to every other column. This is achieved using the :nth-child(even) selector for both table data (td) and table header (th) elements.

Example

This is an example of a vertical zebra-striped table, where alternating columns are styled with different background colors:
```
<!DOCTYPE html><html><head><style>
  td:nth-child(even),
  th:nth-child(even) {
     background-color: #D6EEEE;
  }
   </style></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>
```
Table with Combined Vertical & Horizontal Zebra Stripes

You can achieve a captivating visual effect by combining both horizontal and vertical zebra stripe patterns on your table. This involves applying alternating styles to both rows (:nth-child(even)) and columns (td:nth-child(even), th:nth-child(even)).

To enhance this effect, consider adjusting the color transparency using the rgba() function, creating an engaging and aesthetically pleasing overlap of stripes for a unique and visually interesting outcome.

Example

This is an example of a table with combined vertical and horizontal zebra stripes, where both alternating rows and columns are styled with different background colors:
```
<!DOCTYPE html><html><head><style>
  tr:nth-child(even) {
     background-color: rgba(150, 212, 212, 0.4);
  }
  th:nth-child(even),
  td:nth-child(even) {
     background-color: rgba(212, 150, 192, 0.4);
  }
   </style></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>
```
Table with Horizontal Dividers

You can enhance the visual structure of your table by incorporating horizontal dividers. Achieve this effect by styling each ‘<tr>’ element with a bottom border.

This CSS customization provides a clear separation between rows, contributing to improved table clarity and a more organized presentation of tabular data.

Example

This is an example of a table with horizontal dividers, where each row is separated by a distinct horizontal line:
```
<!DOCTYPE html><html><head><style>
  table {
     border-collapse: collapse;
  }
  tr {
     border-bottom: 5px solid #ddd;
  }
  th,
  td {
     padding: 10px;
     /* Add padding for better visibility */
  }
   </style></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>
```
The above HTML program defines a simple table with two rows and two columns. CSS styles are applied to create a visual separation between rows using a solid border at the bottom of each row. The border-collapse property ensures a cleaner layout, and padding is added for improved visibility of table cells.

Hoverable Table Rows

You can improve user interaction by employing the ‘:hover’ selector, which highlights table rows when users hover over them. This enhances the visual feedback, making the table more interactive and user-friendly.

Example

This is an example of hoverable table rows, where the background color of a table row changes when the user hovers over it:
```
<!DOCTYPE html><html><head><style>
  tr:hover {
     background-color: #D6EEEE;
  }
   </style></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>
```
The above HTML program creates a table with a border. The CSS style makes the rows change the background color to light blue when hovered over, enhancing user interaction.
August 16, 2025

Table Headers and Captions

Headers and captions are used inside tables to organize and present data in a structured format.

The table heading is an essential part of a table, providing labels for columns. The <th> (table header) element is used to define table headings.

Captions are used in the tables to provide a title or explanation for the table. The <caption> element is placed immediately after the opening table tag.

The <caption> tag is deprecated in HTML5 and XHTML. This means that it is still supported by most web browsers, but it is not recommended for use in new web pages. If you are writing new code, you should use the figure and figcaption elements instead. The figure element is used to group related content, and the figcaption element is used to provide a caption for the content.

The <caption> tag is deprecated in HTML5 and XHTML. This means that it is still supported by most web browsers, but it is not recommended for use in new web pages. If you are writing new code, you should use the figure and figcaption elements instead. The figure element is used to group related content, and the figcaption element is used to provide a caption for the content.

Syntax to Create Table’s Header and Caption

The following is the syntax to create a header and caption for an HTML table:

<table><caption>Description of table</caption><tr><th>heading 1</th><th>heading 2</th><th>heading 3</th></tr></table>

Define a Header Row for a Table

The <th> tag is used to represent table headings, and it is typically used within the <tr> (table row) element. Unlike the <td> (table data) tag used for regular cells, <th> is reserved for headers. In most cases, the first row of a table is designated as the header row.

Example

Consider a simple HTML table with headings for “Name” and “Salary”:

<!DOCTYPE html><html lang="en"><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>

Styling Table Headings

Styling table headings can enhance the visual appeal of a table. CSS can be applied to <th> elements to customize their appearance. In the following example, a simple CSS style is added to the <style> tag within the <head> section to modify the background color and text alignment of the table headings.

Example

This example demonstrates how you can style table headings with CSS:

<!DOCTYPE html><html lang="en"><head><title>Styled HTML Table Header</title><style>
   th {
  background-color: #4CAF50;
  color: white;
  text-align: left;
  padding: 8px;   }
   </style></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>

Using Header Cells in Any Row

While it’s common to use <th> in the first row of a table, you can utilize it in any row based on your requirements. This flexibility allows for the creation of complex tables with multiple header rows or headers interspersed within the table.

Example

In this example, we are creating table headers in the first row:

<!DOCTYPE html><html lang="en"><head><title>Styled HTML Table Header</title><style>
  th {
     background-color: #4CAF50;
     color: white;
     text-align: left;
     padding: 8px;
  }
   </style></head><body><table border="1"><tr><th>Name</th><th>Salary</th></tr><tr><td>Ramesh Raman</td><td>5000</td></tr><tr><th>Additional Details</th><th>Specialization</th></tr><tr><td>Technical Lead</td><td>Web Development</td></tr></table></body></html>

Table Header Using <thead> Element

The <thead> tag is used to group table header cells so that a combined CSS style can be applied to header cells.

The <thead> tag is typically placed within the <table> element and contains one or more <tr> elements, each of which, in turn, contains <th> elements representing column headers.

Example

In this example, we are creating a table header using the thead tag:

<!DOCTYPE html><html lang="en"><head><title>HTML Table Header</title></head><body><table border=1><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead><!-- Table body goes here --></table></body></html>

Defining Multiple Header Rows

You can include multiple <tr> elements within <thead> to create multiple header rows. This is useful when your table structure requires a more complex hierarchy of headers.

Example

In this example, we are defining two rows as the table header:

<!DOCTYPE html><html lang="en"><head><title>HTML Table Header</title></head><body><table border=1><thead><tr><th colspan=2>Tutorialspoint</th></tr><tr><th>Role</th><th>Experience</th></tr></thead><tr><td>Technical Lead</td><td>5 Years</td></tr><tr><td>Web Developer</td><td>2 Years</td></tr></table></body></html>

Using ‘<colgroup>’ Inside ‘<thead>’

The <colgroup> tag can be used within <thead> to group together a set of column and apply CSS styling or attributes to entire columns.

Example

In this example we apply style to first two columns of table by grouping those columns in colgroup tag.

<!DOCTYPE html><html lang="en"><head><style>
  .col1 {
     background-color: #f2f2f2;
  }
   </style></head><body><h1>Table with colgroup</h1><table border="1"><colgroup class="col1"><col  style="width: 150px;"><col  style="width: 200px;"></colgroup><col  style="width: 150px;"><col  style="width: 100px;"><thead><tr><th>Product ID</th><th>Product Name</th><th>Category</th><th>Price</th></tr></thead><tbody><tr><td>1</td><td>Smartphone</td><td>Electronics</td><td>$299.00</td></tr><tr><td>2</td><td>Office Chair</td><td>Furniture</td><td>$89.00</td></tr><tr><td>3</td><td>Laptop</td><td>Electronics</td><td>$999.00</td></tr></tbody></table></body></html>

Combining with ‘<tfoot>’ and ‘<tbody>’

The <thead> tag is often combined with <tfoot> (table footer) and <tbody> (table body) to create a comprehensive table structure.

Example

In the following code the structure of table separates header, body, and footer content for better organization.

<!DOCTYPE html><html lang="en"><head><title>HTML Table</title></head><body><table border><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead><tbody><tr><td>value 1</td><td>value 2</td><td>value 3</td></tr></tbody><tfoot><tr><td>Total</td><td></td><td></td></tr></tfoot></table><p>
  Footers are generally used to enter 
  sum of values of each column.
   </p></body></html>

Difference between <thead> and <th>

Following are the points that highlight the differences between <thead> and <th> −

The <thead> tag is a structural element used to group header content, while <th> is a cell-level element defining a header cell.
It’s common to use <th> within <thead>, but <th> can also be used outside <thead> to define headers in regular rows.
Including <thead> is optional; however, using it improves the semantic structure of the table.

Adding Caption to a HTML Table

The caption tag will serve as a title or explanation for the table, and it shows up at the top of the table.

Example

In the following code we will display a caption on top of a HTML table:

<!DOCTYPE html><html><head><title>HTML Table Caption</title></head><body><table border="1"><caption>This is the caption</caption><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 Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are −

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

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

Example

In this example, we are creating an HTML table with the table header, body, and footer:

<!DOCTYPE html><html><head><title>HTML Table</title></head><body><table border="1" width="100%"><thead><tr><th colspan="4">
           This is the head of the table
        &lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tfoot&gt;&lt;tr&gt;&lt;td colspan="4"&gt;
           This is the foot of the table
        &lt;/td&gt;&lt;/tr&gt;&lt;/tfoot&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Cell 1&lt;/td&gt;&lt;td&gt;Cell 2&lt;/td&gt;&lt;td&gt;Cell 3&lt;/td&gt;&lt;td&gt;Cell 4&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Cell 5&lt;/td&gt;&lt;td&gt;Cell 6&lt;/td&gt;&lt;td&gt;Cell 7&lt;/td&gt;&lt;td&gt;Cell 8&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 16, 2025

Tables

HTML tables represent data, such as text, images, etc. in a structured format with rows and columns.

HTML tables offer a visual structure that aids in clarity and comprehension, making them a fundamental element in web development.

Why HTML Tables are Used?

HTML tables are used for various reasons, primarily centered around organizing and presenting data effectively. Some key purposes include −

Structuring Data − Tables provide a coherent structure for organizing and displaying data, making it easier for users to interpret information.
Comparative Presentation − When there is a need to compare different sets of data side by side like difference between two concepts, tables offer a clear and visually accessible format.
Tabular Data Representation − Information that naturally fits into rows and columns, such as schedules, statistics, or pricing tables, can be well-represented using HTML tables.

Creating an HTML Table

You can create a table in HTML by using the <table> tag along with several tags that define the structure and content inside the table. The primary tags that are used with the <table> tag are <tr>, <td>, and <th>.

Creating tables in HTML involves several elements that define the structure and content. The primary tags used are <table>, <tr>, <td>, and <th>.

HTML <table> Tag: This tag is used to create the table that wrap the rows and columns within it.
HTML <tr> Tag: Stands for “table row” and is used to create a row within the table.
HTML <td> Tag: Represents “table data” and is used to create standard cells within a row.
HTML <th> Tag: Represents “table header” and is used to create header cells within a row.

HTML Table Structure – Rows and Columns

Rows: Each row in an HTML table is defined using the <strong><tr></strong> tag. It contains a set of table cells (<strong><td></strong> or <strong><th></strong>), representing the individual elements within that row.
Columns: The actual data or header information is contained within the table cells. Cells in the same position in different rows form a column.
A table row is defined by the <tr> tag. To set table header, we use <th> tag. To insert data in table cell, use the <td> tag.
A table in HTML consists of table cells inside rows and columns of the table.
Table heading is defined by the <th>…</th>. Data inside the <th> are the headings of the column of a table.
Each table cell is defined by a <td>…</td> tag. Data inside the <td> tag are the content of the table rows and columns.
Each table row starts with a <tr> ….</tr> tag.
We use style sheet to create border for the table.

Example

Consider a table representing a simple list of products with their respective categories and prices. This basic table structure organizes data in a clear, tabular format, making it easy to read and understand. Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border=”0″.

<!DOCTYPE html><html><body><table border="1"><tr><th>Product</th><th>Category</th><th>Price</th></tr><tr><td>Laptop</td><td>Electronics</td><td>$800</td></tr><tr><td>Bookshelf</td><td>Furniture</td><td>$150</td></tr><tr><td>Coffee Maker</td><td>Appliances</td><td>$50</td></tr></table></body></html>

Styling HTML Tables

You can also style an HTML table using CSS properties to give it a custom appearance. Either you can create classes to apply styles on a table, or you can simply write internal CSS properties to style the table.

Example

In the example below, we are styling the table with some CSS properties to make it stylish:

<!DOCTYPE html><html><head><style>
   table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;   }
   th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;   }
   th {
  background-color: #f2f2f2;   }
   </style></head><body><h2>HTML Table</h2><p>This table is 3*3 cells including table header.
&lt;table&gt;&lt;tr&gt;&lt;th&gt;Header 1&lt;/th&gt;&lt;th&gt;Header 2&lt;/th&gt;&lt;th&gt;Header 3&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Data 1&lt;/td&gt;&lt;td&gt;Data 2&lt;/td&gt;&lt;td&gt;Data 3&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Data 4&lt;/td&gt;&lt;td&gt;Data 5&lt;/td&gt;&lt;td&gt;Data 6&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Table Background Color and Image



You can set the background color and background image of an HTML table by using the CSS and attributes of the <table> tag.



Using Attributes



The following are the attributes that can be used with <table> tag to set the background color and/or image:




bgcolor: The bgcolor attribute sets the table's background color.<table bgcolor="#f0f0f0">



background: The background attribute sets a background image.<table background="image.jpg">




Using CSS Properties



Using table tag's attributes is an old (outdated) style. It is recommended that you should use CSS to style an HTML table. The background-color and background-image properties are used to set background color and image respectively.



table {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
}



Example to set table's background color and image using attributes



Here we are setting background color and image for a table using the attributes of <table> tag:



<!DOCTYPE html><html><head><title>HTML Table Background Color</title></head><body><table border="1" bordercolor="green" bgcolor="yellow" background="/images/test.png"><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>



Example to set table's background color and image using CSS



Here we are setting background color and image for a table using the CSS properties:



<!DOCTYPE html><html><head><title>HTML Table Background Color</title><style>
table {
  background-color: yellow;
  background-image: url('/images/test.png');
}
</style></head><body><table><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 Width and Height



The table's width and height can be set using either attributes or CSS properties. These values can be defined in pixels or percentages.



Using Attributes



The following attributes can set the width and height of a table:




width: It defines the width of the table.<table width="80%">



height: It defines the height of the table.<table height="200">




Using CSS



The following CSS properties can set the width and height of a table:




width: It defines the width of the table.table { width: 80%; }



height: It defines the height of the table.table { height: 400px; }




Example to set table's width and height using attributes



Here we are setting width (80%) and height (400px) of the table using the <table> tag's attributes:



<!DOCTYPE html><html><head><title>HTML Table Width/Height</title></head><body><table border="1" width="80%" height="400"><tr><th>Header 1</th><th>Header 2</th></tr><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>



Example to set table's width and height using CSS



Here we are setting width (80%) and height (400px) to the table using the CSS properties:



<!DOCTYPE html><html><head><title>HTML Table Width/Height</title><style>
   table{
   width: 80%;
   height: 400px;   }
   </style></head><body><table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><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>



HTML Nested Tables



Nested HTML tables refer to create tables inside a table. You can create tables inside a table by using the <table> tab inside any <td> tag, it creates another table in the main table's cell.



Example



In the following example, we are creating nested tables:



<!DOCTYPE html><html><head><title>HTML Nested Tables</title></head><body><table border=1><tr><td> First Column of Outer Table </td><td><table border=1><tr><td> First row of Inner Table </td></tr><tr><td> Second row of Inner Table </td></tr></table></td></tr><tr><td><table border=1><tr><td> First row of Inner Table </td></tr><tr><td> Second row of Inner Table </td></tr></table></td><td> First Column of Outer Table </td></tr></table></body></html>



Table-related Tags Reference



The following are the table-related tags. You can click on the link to read about the specific tag and click on "Try It" to practice its example:



Tag Descriprtion Example
<table> It is used to create HTML table. Try It
<th> This tag defines the header of the table. Try It
<tr> This tag defines a table row. Try It
<td> This tag is used to store table data of each cell. Try It
<caption> This tag specifies the caption for the table. Try It
<colgroup> This tag describes the collection of one or more columns in a table for formattig. Try It
<col> This tag is used to offer information about columns. Try It
<thead> This tag is used to define table header section. Try It
<tbody> This tag is used to define table body section. Try It
<tfoot> This tag is used to define the table footer section. Try It

Tag	Descriprtion	Example
<table>	It is used to create HTML table.	Try It
<th>	This tag defines the header of the table.	Try It
<tr>	This tag defines a table row.	Try It
<td>	This tag is used to store table data of each cell.	Try It
<caption>	This tag specifies the caption for the table.	Try It
<colgroup>	This tag describes the collection of one or more columns in a table for formattig.	Try It
<col>	This tag is used to offer information about columns.	Try It
<thead>	This tag is used to define table header section.	Try It
<tbody>	This tag is used to define table body section.	Try It
<tfoot>	This tag is used to define the table footer section.	Try It

August 16, 2025

Backgrounds

The background of a webpage is a layer behind its content, which includes text, images, colors, and various other elements.

It is an essential part of web design that improves the overall look of a web page as well as the user experience. HTML offers multiple attributes and properties for manipulating the background of elements within a document.

By default, our webpage background is white in color. We may not like it, but no worries. HTML provides the following two good ways to decorate our webpage background:.

HTML Background with Colors
HTML Background with Images

Syntax

The following are the syntaxes for HTML backgrounds:

<body background = value><body style="background-color: value;">

The value can be an English name of color, an RGB value of color, or a hexadecimal value of color.

Examples of HTML Background

Following are some example codes that show how to set different styles of background for an HTML document.

Setting Color for Background

An elementary method to modify the background is by altering its color. The background-color property facilitates the specification of a color for an element’s background. This can be accomplished by incorporating the following style attribute within the opening tag of an HTML element.

Example

The following is an example of setting color for background to a DIV:

<!DOCTYPE html><html lang="en"><head><title>Styled Div Example</title></head><body><div style="background-color: #3498db; "><h1>Welcome to My Website</h1><p>
     This is an example of a styled div with a 
     background color and text color.
  &lt;/p&gt;&lt;!-- Additional content goes here --&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Setting Image as Background



HTML allows us to specify an image as the background of our HTML web page or table. The background and background-image can be used to control the background image of an HTML element, specifically page body and table backgrounds. We simply need to pass the path of an image as a value to both properties as illustrated in the next example. In the below example, the background-image property is assigned to the body of web page.



Example



The following is an example of setting an image as a background color; here we are setting an image to the background of the webage with the <body> tag:



<!DOCTYPE html><html lang="en"><head><title>Background Image Example</title></head><body background="/market/public/assets/newDesign/img/logo.svg"><div style="background-color: rgba(255, 255, 255, 0.8); padding: 20px;"><h1>Welcome to My Website</h1><p>
     This is an example of setting a background 
     image using HTML attributes.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Background Repeat and Position



Although you can set an image as the background using just HTML, in order to control it's behavior, like repeating and positioning, we need to use CSS. We recommend watching our CSS background-image for better understanding. CSS offers options for controlling how background images repeat and their positioning. The background-repeat property specifies whether the image should repeat horizontally, vertically, both, or neither. Furthermore, the background-position property empowers developers to determine where the background image should be positioned within the element.



Example



The below HTML program creates a webpage with a centered content div having a repeating vertical background pattern from the specified image. The background color of the container is set to white by default, and the text within the container is styled with a black color, creating a visually appealing and cohesive design.



<!DOCTYPE html><html lang="en"><head><title>HTML Background Repeat</title><style>
  body {
     background-image: 
        url('/market/public/assets/newDesign/img/logo.svg');
     background-repeat: repeat-y;
     background-position: center;
     justify-content: center;
     align-items: center;
     display: flex;
  }
  div{
     background-color: rgba(255, 255, 255, 0.6); 
     padding: 20px;
  }   </style></head><body><div><h1>Welcome to My Website</h1><p>
     This is an example of setting a background 
     image using HTML attributes.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Setting Patterned Backgrounds



You might have seen many patterns or transparent backgrounds on various websites. This can simply be achieved by using a patterned image or transparent image in the background. It is suggested that while creating patterns or transparent GIF or PNG images, use the smallest dimensions possible, even as small as 1x1 to avoid slow loading.



Example



Here is an example of how to set the background pattern of a table.



<!DOCTYPE html><html><head><title>HTML Background Images</title></head><body><!-- Set a table background using pattern --><table background = "/images/pattern1.gif" 
     width = "100%" 
     height = "100"&gt;&lt;tr&gt;&lt;td&gt;
     This background is filled up with a pattern image.
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;!-- Another example on table background using pattern --&gt;&lt;table background = "/images/pattern2.gif" 
     width = "100%" 
     height = "100"&gt;&lt;tr&gt;&lt;td&gt;
     This background is filled up with a pattern image.
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 16, 2025

Blog

HTML Definition Lists

Definition List Tags

Creating Definition List

Syntax

Example of Definition List

Styling Definition Lists

Example

Default CSS for Definition Lists

Example

Nested Definition Lists

Example

Ordered HTML Lists

Creating Ordered Lists

Example

HTML Ordered List – The type Attribute

Ordered List With Numbers

Ordered List With Uppercase Roman

Ordered List With Lowercase Roman

Ordered List With Uppercase Alphabets

Ordered List With Lowercase Alphabets

HTML Ordered List – The start Attribute

Syntax

Example

Styling HTML Ordered List

Example

Nested Ordered Lists

Example

Unordered HTML Lists

Creating Unordered Lists

Example

HTML Unordered List – Specifying List Marker

Disc Marker

Square Marker

Circle Marker

HTML Unordered List Without Bullets

Syntax

Example

Styling Unordered HTML Lists

Example

Nested Unordered Lists

Example

Using Lists in HTML

Unordered lists

Example

Ordered Lists

Example

Definition Lists

Example

Nested Lists

Example

Grouping Lists Inside <div> Tag

Example

Styling Lists

Example

HTML Lists Marker Types

Example

Nested Tables

Basic Structure of Nested Tables

How To Create a Nested Table?

Step 1: Create Outer Table

Step 2: Define Rows and Columns

Step 3: Embed Inner Table

Step 4: Define Inner Table Content

Step 5 – Close Tags

Example of Nested Tables

Tables Within Cells

Example

Styling Nested Tables

Example

Images in Nested Tables

Example

Benefits of Nested Tables

HTML Table Colgroup

The <colgroup> Tag

Syntax

Using <colgroup> Tag in HTML Table

1. Insert <colgroup> Tag

2. Define Columns

3. Apply Attributes or Styles

1. Insert `<colgroup>` Tag