HTML Part III

Tables & Lists

Lecturer:
Mostafa Olumee
Outline
• HTML Tables
▪ Creating table in HTML

▪ Structure of Table

▪ Column & Row Span (Merging Cells of Table)

• HTML LIST
▪ Ordered List

▪ Unordered List

▪ Description List
Tables
● Tables refer to structured arrangements of information, typically

organized into rows and columns.

● Tables provide a concise and convenient means of displaying data,

making it easier to compare information effectively

 Creating table
● The content of every table is enclosed by these two tags : <table></table>.

● Add these HTML tags inside the body tags.

● The smallest container inside a table is a table cell, which is created by a <td></td>
element ('td' stands for 'table data’).

● Add the above element inside the <table></table> element

● By default tables have no borders in order to add borders use border attribute
○ <table border=“1"></table>
 Creating table
● If we want four cells, we need to write four <td></td> tags

Result

● Each <td> element creates a single cell.

Creating table
● As you can see in the result, all cells are
placed in one row
● In order to place cells inside multiple
rows place them inside <tr></tr>
tags('tr' stands for 'table row').
Result
Other table tags
● The <th> </th> (th stands for table header) labels
each column as a heading.
○ It’s similar to <td></td>, but the cell content has
bold style
● To provide a caption for a table <caption></caption>
can be used.
○ But it should be the first element inside the
<table></table> element
 Adding structure with <thead>, <tfoot>, and <tbody>

● As your tables get a bit more complex in structure, it is useful to give them more

structural definition.

● One clear way to do this is by using <thead>, <tfoot>, and <tbody>, which allow

you to mark up a header, footer, and body section for the table.

● When printing a large table that spans multiple pages, these elements can enable

the table header and footer to be printed at the top and bottom of each page.

● Makes it easier to apply CSS styles differently for each part of the table
 Adding structure with <thead>, <tfoot>, and <tbody>

● The <thead> element needs to wrap the part of the table that is the

header.

● The <tfoot> element needs to wrap the part of the table that is the footer

— this might be a final row with items in the previous rows summed.

● The <tbody> element needs to wrap the other parts of the table content

that aren't in the table header or footer. It will appear below the table

header.
 Merging Columns & Rows
● Attributes colspan and rowspan are used in <td> tags for spanning the cells

to a particular number of columns or rows, respectively.

Column Span Example
Row Span Example
HTML LIST
Ordered, Unordered, Description
What are Lists?
● Lists are used to organize and present information in a structured
and easily readable format.

● Lists help break up content into manageable chunks, making it easier

for readers to scan and comprehend.
1. Unordered List
2. Ordered List
3. Description List
 Unordered List
● Unordered lists are used to present items in no particular order and

are typically preceded by bullet points or other symbols.

○ Milk

○ Eggs

○ Bread
 Unordered List
● Every unordered list starts off with a <ul></ul> element — this wraps

around all the list items.

● In order to define each list item, we should wrap each list item with
<li></li>
Unordered List Example
Ordered List
● Ordered lists are lists in which the order of the items does matter —

let's take a set of jobs that should be in order as an example:

1. Go work

2. Meet supervisor

3. Eat lunch

4. Go shopping after work

Ordered List
● The markup structure is the same as for unordered lists, except that you

have to wrap the list items in an <ol></ol> element.

Ordered List Example
Ordered List Example
Nested Lists
● It is perfectly ok to nest one list inside another one. You might want to

have some sub-bullets sitting below a top level bullet. Let's take the

second list from our recipe example

Nested Lists
Description List
● Description lists are used to present terms and their corresponding
descriptions or definitions.

● To create a description list in HTML, you use the <dl> element and wrap
each term within <dt> tags and each description within <dd> tags.

● Let's look at an example of a set of terms and definitions:

These Tag names stands for: Output Example

• <dl> - Description list

• <dt> - Definition Term
• <dd> - Definition Description
Description List Example
If You Have Any Question Please
Do not Hesitate!