Embed Size (px)
Citation preview
CO1552 – Web Application Development
Lists, Special Characters, and Tables
Lists There are two different types of lists
within XHTML. Ordered lists
numbered and Unordered lists
those with a “bullet”, simply an icon or a dot next to the items.
Style sheets give us even more options regarding list styles.
Ordered list <ol> + <li> An ordered list is numbered We use a combination of tags to display
an ordered list on the browser.<ol>
<li>Number One</li><li>Number Two</li><li>Number Three</li>
</ol>
The <ol>…</ol> tag defines the section that is the ordered list.
The <li>…</li> tags define the list items to be displayed.
Unordered list <ul> +<li> An unordered list is bulleted Here we use a <ul>…</ul> tag instead.<ul>
<li>This is a bullet point</li><li>This is another bullet
point</li></ul>
With unordered lists, we can alter the shape of the icon at the left hand side of the item by using CSS attributes
Special Characters HTML is based around text only. We use special characters to tell the
browser that we are presenting instructions rather than text
for example the < > characters are special characters that inform the browser we are actually specifying a tag.
Within HTML, these special characters are reserved and have special meanings.
Less Than, More Than< … >
The less than and more than characters are used by HTML to represent a tag.
They are reserved and should not be used in plain HTML text. For example,
<strong>4 < 10 and 10 > 2 = True</strong>
will not display correctly. (you’ll see “4 2 = True”) To output these characters in HTML, you should use the following,
> (greater than)< (less than)
The example would be written correctly as,<strong> 4 < 10 and 10 > 2 = True</strong>
Ampersand The ampersand is used to let tell the browser that it
is displaying a special character. The ampersand is reserved, and requires a special
character for itself. For example,<em>John & Kate walked up a hill</em>should not be used.
To display an ampersand, use &The above example would be correctly written as,
<em>John & Kate walked up a hill</em>
Other Characters Quotation marks are properly used to surround values of attributes. If you want to use a Quotation mark symbol directly in your web
pages, you should use " No matter how many times you have tried, browsers will ignore all
white space that you insert in a HTML file. If you had written the following HTML,
John and KateIt would display in a web browser as,John and Kate
To insert spaces in a web page, you should use a non-breaking space.
Large amounts of extra space are better controlled through style sheet alignment and margin settings rather than by using lots of instructions.
HTML Tables It is sometimes useful to display data in a
tabular format.
Facility Benefit CostComputer faster data processing £700
A table contains rows, columns and cells
Row The shaded area is a row (there
are three rows in total)
Column The shaded area is a column
(there are three columns in total)
Cell The two shaded areas are two cells
(there are 9 cells in total)
Table borders A table has a “border” attribute
defines the number of pixels that are used to show the divisions between cells
can range from 0 upwards. When the border attribute is equal to
zero, the lines are not displayed.
Tables… All of the facilities up to now can be written
easily in HTML. Using a combination of <table>, <tr> and <td>
we can recreate each of the previous table scenarios.
When describing a table in HTML we NEVER have to describe the number of
columns that are to be displayed. These are automatically calculated on our
behalf by the browser.
Table Tag <table> The <table> tag defines a table. Within a table you must define table rows and
table data (cells). You use the <table> tag to define the start and
end of a table, use the <tr> tag to define the start and end of a
row and <td> tag to display any data within the table.
You CANNOT display anything within a table unless it is within a cell and a row.
Table Row Tag <tr> Use the <tr> tag to tell the browser that
you are inserting a row into the table. You can only display <td> tags within a
table row. It is important to note that any
attributes defined within a <tr> tag will define values across all cells within that row.
Table Data Tag <td>…</td>
A table data tag describes a cell The table data tag is the real work-
horse of HTML tables. It is the only tag that will allow any
item to be displayed within a table anything outside of a <td> tag is
displayed before or after the table.
Tables – Columns and Rows XHTML will automatically calculate the
number of columns in a table based on the number of cells within a row.
You must ensure that you have the same number of columns in each row.
If you don’t, then your table will not look as you wanted it to look …
Columns <table border=”1”>
<tr><td></td><td></td>
</tr><tr>
<td></td><td></td>
</tr></table>
How many rows and how many columns?
Columns <table border=”1”>
<tr><td rowspan=”2”></td><td></td>
</tr><tr>
<td></td></tr>
</table>
How many rows and how many columns? And how many cells on the rows?
Columns<table width="600" height=”200" border=”1”> <tr>
<td width="20%" height="36">hello 1</td><td width="80%”>hello 2</td>
</tr><tr>
<td>hello 3</td> <td>hello 4</td> </tr></table>
How many rows and how many columns? And how wide and how high are the rows and cells?
Cellspacing & Cellpadding
These are attributes of the <table> tag. Cellspacing specifies the space between cells, in
pixels. Cellpadding specifies the space between the cell
border and the item within the cell, in pixels. These attributes are intended to make it easier
to read our tables, when they contain tabular data.
They are used in the same way margins are used.
Cellspacing and Cellpadding It is possible to remove cellspacing and
cellpadding altogether, by giving them a value of zero.
This will leave no gaps between cells or the items within the cells.
Cellspacing and cellpadding both have a default value of 2px, so you must specify a value of zero to achieve this result.
Table & Cell Widths We can specify the width of a table either in terms of pixels or
percentages. If we use a percentage it is relative to the “thing” that contains
the table tag. For example if we define a table with 100% width
if the container of that table is the browser window then the table will stretch across 100% of the browser window
width. However, if the container of the same table is a cell which is 200
pixels wide* then that inner table will stretch for 100% of the width of the
outer table cell making the inner table 200 pixels wide.
*you can nest tables inside other tables, so a table inside a cell is possible
Width A table row will automatically take
on the width of a table. We can also specify the width of
individual cells. Be careful when specifying widths
of individual cells (next)>>
Width For example, the following doesn’t entirely make sense: why?
<table border=”1” width=”100%”><tr>
<td width=”10”><td width=”20”><td width=”30”>
</tr></table>
Undefined numbers are interpreted as pixels: <td width=”10”><td width=”20”><td width=”30”>
If the table has automatically taken on the width of the user’s browser window, eg 800 pixels,
What is the browser to do with the 740 pixels that have not been defined in the table cells?
60 pixels
Column widths It is also an important concept (and a
difficult one) to understand that browsers will represent your columns down a table at the same width throughout
They follow the widths of the first row of cells
Tables for Formatting One way of using tables is not to display
“tabular data”, but to use table cells to help format the contents of the screen.
You can insert any XHTML element within a table cell, be it text, form elements, or images. You have all seen web sites with a navigation bar on
the top and the left, and main text below on the right, which is commonly done through the use of a table.
Maybe not … Tables, particularly nested tables, can be very hard to
navigate using only keyboard controls. Screen Readers, mostly older ones, are very poor at dealing with information which is presented in a side by side format.
Some people use browsers, such as Lynx, which linearize tables. When a table is used for layout, it is frequently the case that it is confusing or non-sensical when linearized:
Example:
Wk Indicative content of lecturesTutorialsLabsWeb resources and notes issuedWk2Background to web – history, basic architecture, historical uses, DNS, FTP. Different uses made of the webThinking about using the Internet to find relevant informationPhotoshop exercise – building a roll-over button
Table headers The intended function of the <table> tag (and
its related tags) is to represent tabular data. Tables used for formatting will probably not
need table headers Data tables on the other hand DO need table
headers <th> A table header is the top row Identifies columns of similar information to devices
such as screen readers Default style sheet displays TH differently to TD
Exercise Consider the layout of your assignment
web page design Will it be easy to create using a table? Draw it on paper indicating all the cells
you will need Try creating a suitable layout in XHTML
(preferably using Notepad, Textpad or the Dreamweaver code window only!)
