Scribd
Upload
37 views

Lecture 8

This lecture discusses HTML tables and escape sequences. It explains that tables organize information into rows and columns using table elements like <TABLE>, <TR>, <TH>, and <TD>. It provides an example of a simple single-celled table and a more complex time table. It also explains that special characters called escape sequences beginning with & and ending with ; can be used to display characters like non-breaking spaces when multiple spaces are unwanted. An example uses &nbsp; to add non-breaking spaces between names.

Uploaded by

swizz Paul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
37 views

Lecture 8

This lecture discusses HTML tables and escape sequences. It explains that tables organize information into rows and columns using table elements like <TABLE>, <TR>, <TH>, and <TD>. It provides an example of a simple single-celled table and a more complex time table. It also explains that special characters called escape sequences beginning with & and ending with ; can be used to display characters like non-breaking spaces when multiple spaces are unwanted. An example uses &nbsp; to add non-breaking spaces between names.

Uploaded by

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

Lecture 8

In this lecture, we will learn about

- How to create Table


- Escape Sequences: Special Characters

Tables are very useful while creating HTML pages; especially tables solve the alignment
problem. A table tag has headings where you explain what the columns/rows include,
rows for information, and cells for each item. In the following table, the first two rows
contain the heading information, each detail row explains an HTML table tag, and each
cell contains a paired tag or an explanation of the tag's function.

Table Elements
Element Description
<TABLE> ... defines a table in HTML. If the BORDER attribute is present, your
</TABLE> browser displays the table with a border.
<CAPTION> ... defines the caption for the title of the table. The default position of the
</CAPTION> title is centered at the top of the table. The attribute ALIGN=BOTTOM
can be used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption.
<TR> ... </TR> specifies a table row within a table. You may define default attributes
for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN
(TOP, MIDDLE, BOTTOM).
<TH> ... </TH> defines a table header cell. By default the text in this cell is bold and
centered. Table header cells may contain other attributes to determine
the characteristics of the cell and/or its contents.
<TD> ... </TD> defines a table data cell. By default the text in this cell is aligned left
and centered vertically. Table data cells may contain other attributes
to determine the characteristics of the cell and/or its contents.

Here is the single cell table, the simplest table possible.

<CENTER>

<table border=1>

<tr>

<td>here is a single-celled table!</td>

</tr>
</table>

</CENTER>
The output on the browser is
here is a single-celled table!

<html>
<head>
<title> Using Table Tag</title>
</head>

<body>
<table border=1>
<caption> Time Table for Mar-June 2005</caption>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thrusday</th>
<th>Friday</th>
</tr>

<tr>
<td>9:30-10:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">109</font></td>
</tr>

<tr>
<td>10:30-11:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">109</font></td>
</tr>

<tr>
<td>11:30-12:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">109</font></td>
</tr>

<tr>
<td>12:30-1:20</td>
<td>-</td>
<td>-</td>
<td><font color="blue">312</font></td>
<td>-</td>
<td>-</td>
</tr>

<tr>
<td>1:30-2:20</td>
<td>-</td>
<td><font color="blue">306</font></td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>

<tr>
<td>2:30-3:20</td>
<td>-</td>
<td><font color="blue">306</font></td>
<td>-</td>
<td><font color="blue">309</font></td>
<td>-</td>
</tr>

<tr>
<td>3:30-4:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">309</font></td>
<td>-</td>
</tr>

<tr>
<td>4:30-5:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">309</font></td>
<td>-</td>
</tr>
<table>
</body>
</html>

Time Table for Mar-June 2005


Monday Tuesday Wednesday Thrusday Friday
9:30-10:20 - - - - 109
10:30-11:20 - - - - 109
11:30-12:20 - - - - 109
12:30-1:20 - - 312 - -
1:30-2:20 - 306 - - -
2:30-3:20 - 306 - 309 -
3:30-4:20 - - - 309 -
4:30-5:20 - - - 309 -

Escape Sequences: Special Characters (a.k.a. Character Entities)

Special characters are composed of short sequence of characters that are translated by the
browser and displayed as a single character.
Special characters begin with an ampersand(&) and end with a semicolon (;), for example
&nbsp, which is used for giving spaces between words or characters

To understand &nbsp; type the following code in notepad


<html>
<head>
<title>Using nbsp </title>
</head>

<body>
My name is Harshit Kumar.
</body>
</html>

The output is
My name is Harshit Kumar.

Although I gave so many spaces between “Harhsit” and “Kumar”, still the output shows
only one space.
This means that browser shrink the spaces, so to insert spaces, we need &nbsp;.

Type the following code in notepad


<html>
<head>
<title>Using nbsp </title>
</head>

<body>
My name is Harshit&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kumar.
</body>
</html>

The output is
My name is Harshit       Kumar.

------------------------------------------------------Finish----------------------------------------------

You might also like