Working With Tables in HTML

 Metadata is information about data.
 The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the page.
 Meta elements are typically used to specify page
description, keywords, author of the document, last
modified, and other metadata.
 The metadata can be used by browsers (how to display
content or reload page), search engines (keywords), or
other web services.
Example

 <Address> Tag.
 <Blockquote >Tag.
 <Pre> Tag.
Address
Block quote
Pre

 Tables are used on websites for two major purposes:
 The obvious purpose of arranging information in a table
 The less obvious - but more widely used - purpose of
creating a page layout with the use of hidden tables.
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 4
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 2 Cell 4
Row 3 Cell 1 Row 3Cell 2 Row 3 Cell 3 Row 3Cell 4
Row 4Cell 1 Row 4Cell 2 Row 4Cell 3 Row 4Cell 4

6
• The table element starts with <TABLE> tag & ends
with a</TABLE> tag.
• Elements that can appear between these tags are as
follows:
Caption element containing the
table’s description.
<CAPTION> table’s description
</CAPTION>
The table row that creates a
horizontal row of cells and contains
table headings & table data.
<TR>
<TH> This is heading </TH>
<TD> This is data </TD> </TR>
The table data element to create
each individual cell
<TD> This is cell 1 </TD>
<TD> This is cell 2 </TD>
The table heading element creates
the heading cells.
<TH> This is heading </TH>
View Example

8
Alignment of the entire table <TABLE ALIGN=“value”>
value can be left, center or right
Width of the entire table <TABLE WIDTH=“number”>
<TABLE WIDTH=“percent”>
Table border <TABLE BORDER=“number”>
Spacing between each neighboring
cell
<TABLE CELLSPACING=“5”>
Space between the cell’s content &
the cell border
<TABLE CELLPADDING=“10”>
View Example 1
View Example
View Example
View Example
View Example
View Example
2

9
Coloring table with BGCOLOR
attribute
<TABLE BGCOLOR=“color name/color
value”>
View Example

10
TEXT
TEXT
TEXT
TEXT TEXT
TEXT TEXT
TEXTTEXT
CELLSPACES CELLSPADDING

11
View Example
<TD COLSPAN=“4”> text </TD>

12
View Example
<TD ROWSPAN=“5”> text </TD>

14
1
2
3
4
1. Limegre
en
2. Cornsilk 3. Pink 4. Cyan

 With frames, you can display more than one HTML
document in the same browser window. Each HTML
document is called a frame, and each frame is
independent of the others.
The disadvantages of using frames are:
 The web developer must keep track of more HTML
documents
 It is difficult to print the entire page

 The HTML frameset Element
 The frameset element holds one or more frame
elements. Each frame element can hold a separate
document.
 The frameset element states HOW MANY columns or
rows there will be in the frameset, and HOW MUCH
percentage/pixels of space will occupy each of them.
16

 Frames are created using the
FRAMESET tag
 The attributes are:
 Rows
 Cols

 The attributes of the FRAME element include:
 name
 src
 noresize
 scrolling

 <frameset cols="25%,75%">
<frame src="frame1.html" />
<frame src="frame2.html" />
</frameset>
19

 <frameset cols="25%,50%,25%">
 <frame src="frame1.html" />
 <frame src="frame2.htm" />
 </frameset>
20

 <frameset rows="25%,50%,25%">
 </frameset>
21

 <frameset rows="50%,50%">
 <frame noresize="noresize" src="frame1.html" />
 <frame noresize="noresize" src="frame2.html" />
 </frameset>
22

 <html>
 <body>
 <iframe src=“http://www.google.com"></iframe>
 </body>
 </html>
23

Nested frames
Frame attributes

Working With Tables in HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Working With Tables in HTML

Semelhante a Working With Tables in HTML (20)

Último

Último (20)

Working With Tables in HTML