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 + An ordered list is numbered We use a combination of tags to display an ordered list on the browser. Number One Number Two Number Three The … tag defines the section that is the ordered list. The … tags define the list items to be displayed.

Unordered list + An unordered list is bulleted Here we use a … tag instead. This is a bullet point This is another bullet point 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, 4 2 = True 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, 4 < 10 and 10 > 2 = True

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, John & Kate walked up a hill should not be used. To display an ampersand, use & The above example would be correctly written as, John & Kate walked up a hill

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 Kate It 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. FacilityBenefitCost Computerfaster 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, and 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 The tag defines a table. Within a table you must define table rows and table data (cells). You use the tag to define the start and end of a table, use the tag to define the start and end of a row and 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 Use the tag to tell the browser that you are inserting a row into the table. You can only display tags within a table row. It is important to note that any attributes defined within a tag will define values across all cells within that row.

Table Data Tag … 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 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 How many rows and how many columns?

Columns How many rows and how many columns? And how many cells on the rows?

Columns hello 1 hello 2 hello 3 hello 4 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 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? Undefined numbers are interpreted as pixels: 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 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 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!)