Lecture 5 - Simple Formatting And Xhtml Tables

Lecture 5 – Simple Formatting and XHTML Tables 

In this lecture, we will discuss: 

More Simple Formatting, The Old Way (useful HTML4) 



Bold, Italic, Text size, Monospaced Fonts; etc

Tables Simple Tables  Combining Tables 



Stacking and Nesting Tables

Controlling Cell Space  Spanning Cells 

Basic (X)HTML Formatting (2) 

Later, we will learn Cascading Style Sheets (CSS) for formatting. 



This separates formatting from content…

However, for very simple formatting, CSS is a lot of work. 

For this, a few HTML alternatives may be recommended… 



That are still allowed in XHTML...

These include methods for: 1. Making text Bold or Italic; 

We used the strong element for this, already.

2. Changing text Size; 3. Using a ‘monospaced’ font; 4. Using pre-formatted text; 5. Quoting text; and, 6. Creating sub-scripts and super-scripts; 

We saw this last lecture.

Making text Bold or Italic 

The standard HTML way to make text bold is via the b element: 

This is explicit bold formatting. text  text.



The standard HTML way to make text italic is via the i element: 

As above, this is explicit italic formatting. text  text.



Instead, we may use logical elements for this… 

Which suggest a culturally-relevant context, rather than a format: 

In L3, we used the strong element: <strong>text  text



The emphasis element: <em>text  text



(usually interpreted as bold)

Of course, this is a subtle distinction…

(usually interpreted as italic)

Changing Font Size 

The big and small tags change text size in a relative way… Based on the size of the surrounding text.  The change will be browser-dependent. 



The default font size on most browsers is 16 px… 



A typical change is 1 font step (i.e., from 16 px to 14 px or 18 px)

For instance, we might have: text  text <small>text  text





You may apply these cumulatively (several times).

Of course, these tags do not provide precise font control… 

We cannot choose the font size. 



For this, we need CSS (later).

However, big and small are useful… 

And have not been deprecated.

Using a Monospaced Font 

Each visitor to your Web-page has two default fonts: 

A regular font… 



Usually the Times font (for Windows users).

A mono-spaced font, which is typewriter-like.. Usually Courier.  In such a font, all characters are equally wide (check!). 



The tt tag is used to insist on using the default monospaced font. 



Here, ‘tt’ means ‘typewriter text’.

In this case, you will get the monospaced default font: text  text



This is mainly useful if you want to display prose (poetry) or code… 

Since line-by-line word/letter alignment may be important.

Using Preformatted Text 

Usually, a browser will eliminate all ‘white-space’: 



Line breaks are thus created automatically… 



white space = extra spaces, returns, etc. based on the user’s current window size.

However, you may use the pre element to render text ‘as is’: 

i.e., With all line-breaks, spacing, etc… 



This is called pre-formatted text.

Example: <pre>this has extra spaces  this 



spaces

Note the side-effect: you also get a monospaced font. Where line-to-line text alignment may be important.

Note that pre is a block-level element: 



extra

This is mainly useful if you want to display code… 



has

Affected text is always displayed on a new line.

In contrast, elements such as strong and em are in-line… 

Affected text is displayed in the current line.

Quoting Text 

Two special tags are available for quoting text: blockquote and q 

Here, quoting = identifying the source of a work 



i.e., author and origin (Journal, etc).

Use the blockquote element to quote block-level text: 

Example:

citedtext





Note: the quoted text is usually indented on both sides… 



Here, url is the address of the source of the cited text. While the quoted source is shown underneath.

Use the q element to quote in-line text: 

This provides in-line quotation marks… 

Example: citedtext



Here, xx is the language of choice, if desired (e.g., jp for Japanese). 

If you omit this attribute, you get quotes from your doc’s default language.

Ex: Basic (X)HTML Formatting (2)

Tables 

Tables are often used to organize columnar data… 



i.e., data in rows and columns

The table element is used to define a table… 

This takes the typical form:

…table head, body, and foot here… 

The listed attributes of table are: 

width specifies the table width…

You may specify the width, w in pixels (px).  Width may also be specified as a percentage of browser window size: 





summary provides a description of table contents… 



This is text, which helps the visually-impaired.

border specifies the table border width, x in pixels. 



i.e., width=“40%” (resizable)

For no border, use the value, “0”.

align is used to position the table within the browser window: 

val = {left, center, right} (Note: center is deprecated).

Basic Tables (example)

Combining Tables (Nesting) 

Table elements may be text, pictures, or even other tables. 

Tables may be combined via two methods: Internally: Nesting tables;  Externally: Stacking multiple tables. 





This may be used to combine pictures and text in a matrix-like manner.

Our author’s procedure for Nesting one table inside of another: 1. Create the inner table, 

Along with any text or other accompanying elements.

2. Create the outer table. 3. Determine which cell of the outer table will hold the inner table… a. Type ‘placeholder’ (or some other text to remember) in this cell. b. Test both tables separately, to make sure they work. c. Replace the word, ‘placeholder’ with the inner table (copy and paste). 

However, Nesting requires browser computing time to fit… 

Excessive nesting may cause browser slowness (even crashing). 



Use it sparingly…

Let’s see a simple example of nesting in action.

Nesting: Simple Example

Aligning a Cell’s Contents 

You may align the contents of a cell… Using the align and valign attributes of td.  Place the attribute/value pair in the start tag of the cell’s td element: 

…cell contents… 

align positions the contents horizontally (side-to-side): 

You may choose from 3 values:  



valign positions the contents vertically (up-and-down): 

You may choose from 3 values:  



v_direction = {top, middle, bottom}. The default value is middle.

Note: align and valign can also be used as attributes of tr or th: 



h_direction = {left, center, right}. The default value is left.

This aligning the contents of every cell in the row.

Note 2: align and valign are still valid for all table elements.

Controlling Cell Space 

You may control the cell space… Using the cellpadding and cellspacing attributes of table.  Place the attribute/value pairs in the start tag of the table: 

…table… 

cellpadding adds space between each cell’s contents and border. 

The padding value, m is an integer (number of pixels): 



The default value for cellpadding is 1 pixel.

cellspacing adds space between the borders of adjacent cells. 

The spacing value, n is an integer (pixels): 

The default value for cellspacing is 2 pixels.

Spanning a Cell 

If you would like a cell to span across several rows or columns… 



You may do this with the colspan attribute (of td and th).

To format a cell in this way… 

place the attribute/value pair(s) in the start tag: 

of the cell’s td or th element (td is shown):

…cell contents… 

colspan makes the cell span across several columns: 

Here, m equals the number of columns the cell should span. 



Note: Be consistent! 



The default value is 1. Each row in a table must have the same total number of columns defined.

rowspan makes the cell span several rows: 

Here, n equals the number of rows the cell should span. 



The default value is 1.

Again: Be consistent! 

Each column in a table must have the same total number of rows defined.

Spanning: Simple Example

Conclusion 

In this Lecture, we have discussed: 

A. More HTML Basics (Part III)     

 B.

Making text Bold or Italic Changing text Size; Using a ‘monospaced’ font; Using pre-formatted text; Quoting text;

Tables:

Simple tables and Nested tables  Formatting Cells and Cell Contents 



Next Lecture, we will continue our discussion of XHTML: 

Dividing our web-pages up: Naming elements and defining classes  Using ‘generic elements’: defining divisions and spans. 

 

Adding Internal links More on Tables: 

Grouping and formatting columns with colgroup and col