Introwebprogramming Unit2 2

Negar Zakeri
§ Lists and Bullets are used to organize set of data in a categorical form. There are
three types of lists available in HTML:
Unordered Lists (Bullets)
Ordered Lists (Numbering)
Definition list
negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 2/30

§ The unordered list is without any specific sequence or order. Bullets
are used to indicate unordered lists of items. <ul> </ul> tags are
used to indicate the starting and ending of the unordered list while
every item is enclosed within <li> </li> tags as shown below:
<ul>
<li> unordered list item 1 </li> <li> unordered list item 2
</li>
</ul>

6 Kasım 2023 Pazartesi 4/30
§ The ordered list is a numbered list of items with a specific sequence
or order. The <ol> </ol> tags are used to indicate the starting and
ending of the ordered list while every item is enclosed in <li> </li>
tags as shown below:
<ol>
<li> ordered list item 1 </li>
<li> ordered list item 2 </li>
</ol>
Unordered list arrange set of related items without any sequence while ordered
list keep the the sequence in order.

</> code 2.7
<!DOCTYPE html>
<html> <li>Vegetables:</li>
<head>
<ul>
<title>Ordered and Unordered list items </title>
</head>
<li>Potato</li>
<body> <li>Onion</li>
</ul>
<ol> </ol>
<li>Fruits:</li> </body>
<ul> </html>
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
<li>Peach</li>
<li>Grapes</li>
<li>Water Melon</li>
</ul>

§ The output clearly shows the difference between ordered and unordered list.

Write HTML code to create the following lists:
1. Working days
§ Monday
§ Tuesday
§ Wednesday
§ Thursday
§ Friday
2. Off days
§ Saturday
§ Sunday

§ The definition list is used to add description with every list item. The <dl> </dl>
tags are used at the starting and ending of the definition list. <dt> </dt> tags are
used to write definition/data term while <dd> </dd> tags are used to define
description of the data terms. The syntax of definition list is as follows:
<dl>
<dt>Term</dt>
<dd>Description of the term</dd>
</dl>
The definition list is used to give description of every list item.

16/30
17/30
§ A table represents information in a grid format.
§ Examples of tables include financial reports, TV schedules, and sports results.

§ A table is a data structure that arranges information
in rows and columns.
§ HTML enables the users to make web pages more
structured by using tables.
§ <table> </table> tags are used to create tables in
HTML.
§ Each table usually has a caption, heading and table
data.

Table caption: The caption is the title of the table. Caption tag is
used to display this title in a web page.
Table heading: The table heading is the heading of each column.

<th> tag is used to incorporate this heading in the table.
Table Rows: The rows are the horizontal group of cells in a table.
The <tr> </tr> tags are used to define the starting and ending of
one row.
Table Data: The table data is used to enter content into a table
cells. <td> </td> tags are used to indicate the starting and ending
of these contents in a table cell. Code 2.9 shows an example of
table creation in HTML
Browsers usually display the content
of a <th> element in bold and in the
middle of the cell.
§ Sometimes you may need the entries in a table to stretch across more than one column.
§ The colspan attribute can be used on a <th> or <td> element and indicates how many
columns that cell should run across.
§ Inthis example you can see a timetable with five columns; the first column contains the
heading for that row (the day), the remaining four represent one hour time slots.
§ Ifyou look at the table cell that contains the words 'Geography' you will see that the value of
the colspan attribute is 2, which indicates that the cell should run across two columns. In the
third row, 'Gym' runs across three columns.

You can see that the second and third rows
have fewer <td> elements than there are
columns. This is because, when a cell extends
across more than one column, the <td> or
<th> cells that would have been in the place
of the wider cells are not included in the
code.
Some CSS styles are added to this example so

that you can see how the cells span more
than one column.
You will learn how to do this on next units.
negar.zakeri@nisantasi.edu.tr 26/30
§ You may also need entries in a table to stretch down across more than one row.
§ The rowspan attribute can be used on a <th> or <td> element to indicate how
many rows a cell should span down the table.
§ In this example you can see that ABC is showing a movie from 6pm - 8pm,
whereas the BBC and CNN channels are both showing two programs during this
time period (each of which lasts one hour).

If you look at the last <tr>
element, it only contains
three elements even
though there are four
columns in the result
below.
This is because the movie

in the <tr> element
above it uses the
rowspan attribute to
stretch down and take
over the cell below.
28/30
§ There are three elements that help distinguish between the main content of the table and
the first and last rows (which can contain different content).
§ These elements help people who use screen readers and also allow you to style these
sections in a different manner than the rest of the table
<thead>
The headings of the table should sit inside the <thead> element.
<tbody>
The body should sit inside the <tbody> element.
<tfoot>
The footer belongs inside the <tfoot> element.
By default, browsers rarely treat the content of these elements any differently than
other elements however designers often use CSS styles to change their
appearance. 29/30
6 Kasım 2023 Pazartesi
Some of the HTML editors that come in content management systems
offer tools to help draw tables. If the first row of your table only contains
<th> elements then you may find that the editor inserts a <thead>
element automatically.
Part of the reason for having separate <thead> and <tfoot> elements is
so that, if you have a table that is taller than the screen (or, if printed,
longer than one page) then the browser can keep the header and footer
visible whilst the contents of the table scroll. This is intended to make it
easier for users to see which column the data is in (however this
functionality is not implemented by default in any current browser).

§ The width attribute is used to set width of a table or width of table
cells. It can be specified in pixels or percentage. If width is not given
the length of longest word in the cell is considered as its width by
default. The syntax is as follows:
<table style= "width:100%;">
§ % sign is used to indicate the width in percentage while simple

figure value indicates pixels. Similarly, the height attribute can be
used to set the height of the table or individual data cells. However,
the height attribute is not recognize by some of the brwosers.
§ There are some outdated attributes which you should not use on new websites.
You may, however, come across some of them when looking at older code, so I
will mention them here. All of these attributes have been replaced by the use of
CSS.
§ The width attribute was used on the opening <table> tag to indicate how wide
that table should be and on some opening <th> and <td> tags to specify the
width of individual cells. The value of this attribute is the width of the table or
cell in pixels.
§ The columns in a table need to form a straight line, so you often only see the
width attribute on the first row (and all subsequent rows would use that
setting).
§ The opening <table> tag could also use the cellpadding attribute to add space
inside each cell of the table, and the cellspacing attribute to create space
between each cell of the table. The values for these attributes were given in
pixels.

§ The default representation of tables in HTML is without
borders. Therefore, border attribute is used to show a table
border. It is defined within the tags of table. The syntax is as
follows:
<table border="1">

§ The border attribute was used on both the <table> and <td> elements
to indicate the width of the border in pixels.
§ The bgcolor attribute was used to indicate background colors of either
the entire table or individual table cells. The value is usually a hex code
§ This example uses the HTML border and bgcolor attributes. No CSS
attributes were utilized in this example.
§ When building a new website you should use CSS to control the
appearance of the table rather than these attributes.
§ They are only covered here because you may come across them if you
look at the code of older websites.

§ The align attribute is used to set the position of table
relative to the other elements on a web page. A table can
be aligned left, right or centered. The syntax of the align
attribute is as follows:
<table align = "center">

§ The cell padding is used to set space between the
cell borders and the content inside the cell. The cell
spacing is used to set space among the cells. The
syntax is as follows:
<table cellpadding = "pixels">

<table cellspacing = "pixels">

§ The column span attribute is used to merge two or more
columns Whereas the rospan does the same for two or
more rows. The syntax of column span and row span is as
follows:
<td colspan =" 3">

<td rowspan =" 3">

Tables are frequently used to arrange and structure the contents in the web pages.
§ In the code 2.8 add some more rows and columns in your
table and see the output. Also change the border
properties to observe the difference in border width.

§ X The <table> element is used to add tables to a web page.
§ X A table is drawn out row by row. Each row is created with the <tr> element.
§ X Inside each row there are a number of cells represented by the <td> element (or
<th> if it is a header).
§ X You can make cells of a table span more than one row or column using the
rowspan and colspan attributes.
§ X For long tables you can split the table into a <thead>, <tbody>, and <tfoot>.

Introwebprogramming Unit2 2

Uploaded by

Copyright:

Available Formats

You might also like

Introwebprogramming Unit2 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introwebprogramming Unit2 2

Uploaded by

Copyright:

Available Formats

Negar Zakeri

Unordered Lists (Bullets)

Ordered Lists (Numbering)

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 2/30

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 3/30

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 5/30

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 7/30

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 8/30

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 9/30

The definition list is used to give description of every list item.

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 10/30

6 Kasım 2023 Pazartesi 18/30

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 19/30

Table heading: The table heading is the heading of each column.

6 Kasım 2023 Pazartesi 25/30

Some CSS styles are added to this example so

6 Kasım 2023 Pazartesi 27/30

This is because the movie

6 Kasım 2023 Pazartesi 30/30

<table style= "width:100%;">

§ % sign is used to indicate the width in percentage while simple

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 34/30

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 35/30

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 37/30

<table align = "center">

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 38/30

<table cellpadding = "pixels">

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 39/30

<td colspan =" 3">

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 40/30

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 43/30

negar.zakeri@nisantasi.edu.tr 6 Kasım 2023 Pazartesi 46/30

You might also like