Scribd
Upload
16 views26 pages

Lecture 05 HTML Tables and Lists

Uploaded by

mhdsameh722
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views26 pages

Lecture 05 HTML Tables and Lists

Uploaded by

mhdsameh722
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

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!

You might also like