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!
