Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
228 views

Chapter7: Advanced HTML: Important Key Points

The document discusses HTML tables and their tags. It provides details on the <TABLE>, <TR>, <TD>, and <TH> tags, including their attributes and usage. It also discusses the <CAPTION> tag for adding captions to tables. Several frequently asked questions are provided at the end regarding using tables, attributes of the <TABLE> tag, and the differences between cell spacing and padding.

Uploaded by

midhungbabu88
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
228 views

Chapter7: Advanced HTML: Important Key Points

The document discusses HTML tables and their tags. It provides details on the <TABLE>, <TR>, <TD>, and <TH> tags, including their attributes and usage. It also discusses the <CAPTION> tag for adding captions to tables. Several frequently asked questions are provided at the end regarding using tables, attributes of the <TABLE> tag, and the differences between cell spacing and padding.

Uploaded by

midhungbabu88
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

1

Chapter7: Advanced HTML

Detailed Syllabus:- (First Part from 7th chapter)


Table: - <TABLE>
(Border, Border Color, Height, Width, Align, Cell Spacing, Cell Pading, Bgcolor, Frame)
Table Rows: - <TR>
(Align, Valign, Rowspan, Colspan)
Table Heading: - <TH>
(Align, Rowspan, Colspan)
Table Data: - <TD>
(Align, Valign, Rowspan, Colspan, Bgcolor, Background)
Caption: - <CAPTION>

FAQ’s
Q.No.1. Why tables are used extensively in web pages?

Q.No.2. Explain the various table formatting tags with syntax and example.

Q.No.3. XYZ Co. wants to create an E-Commerce website. The purpose is to display and list the particulars
of product and price.
a. What are your suggestions to the company?
b. Demonstrate your suggestions by preparing a sample webpage.

Q.No.4. Your class teacher asked you to prepare HTML page showing the students name and marks of all
subjects of your class. Demonstrate this to your class teacher by creating an HTML document with
details of two students.

Q.No.5. Your friend Anita is designing an HTML document with Table as its content.
a. Give suggestions to make table more attractive.
b. Support your suggestion using relevant codes.

Q.No.6. All the table attributes are optional. Is it true? Justify your answer?

Important Key Points.


1. In a Table data is organized in Rows and Columns.
2. Table serves as a convenient way to organize elements on the page without making
them appear within the page without the confines of an actual table.
3. <TABLE> begins a table definition and </TABLE> ends it. Tables are created
without a border that is the horizontal and vertical lines separating the cells will not
appear by default.
4. <TR> and </TR> are used to create a row of the table.
5. The table data tags <TD> and </TD> are used to specify the contents of a cell.
6. <TH> and </TH> are used to create cells in the same way as the table data tags,
except that the text in the cells will be bold and centered
2
7. The caption tags <CAPTION> and </CAPTION> tags allows for the creation of a
caption for a table.
The<table>tag
The<table> tag is used to define and to create a table in HTML. It is a container tag which
contains an opening tag and a closing tag. The <table> and </table> tags must surround the entire
table definition. The <table> has several attributes. All the table attributes are optional.

Syntax:
<table Align=”Left/Center/right”
Border=”value”
Border color=”color”
Width =”value”
Height=”Value”
Bgcolor= “color”
Cell spacing= “value”
Frame= “frame type”>
………. </table>
Attributes of TABLE Tag
Attribute Description
Border Creates a thin line around all cells. The width of the border lines
can be specified as a value in pixels. If specified without any
value, a thin line is created a round all cells. The value 0 is
equivalent to having no border. The larger the value specified the
thicker will be the border.

Border color Assigns a color to the border in hexadecimal triplets or codes.

Height By default a table will be as long as the height of the entries in its
cells. An exact height can be specified here either in pixels or as a
percentage of the browser’s window.

Width By default a table will be as wide as the longest entries in its cells.
An exact width can be specified here either in pixels or as a
percentage of the browser’s window.

Cell spacing Cell spacing means the space between the cell border and table
frame. This space can be adjusted in pixels.

Cell padding Cell padding is the space between the cell border and table frame.
This space can be adjusted in pixels.

Bgcolor Background color can assigned a color using color codes.


Align Aligns the table with respect to other document elements
Frame Frame specifies with sides of the table’s outer border are visible in
the browser window. Normally all the four sides of the table will
have a border. Using the frame attribute we can control display of
these borders.
3
Background An image can be specified as a background of a table. The
filename of the desired image should be specified here. The
specified image is tiled to fill the background of the table.
FAQ’s
Q.No.1. Read the HTML code given below and answer the following question
<TABLE border = 1cell spacing =2 cellpadding = 4>
(a) Differentiate between cell spacing and cell padding.
(b) Briefly describe three attributes of <TABLE> tag other than cell spacing, cell padding and
border.
Q.No.2. If you specify RED to the bgcolor attribute of <TABLE> tag then, the entire table will be given the
color RED. Where will you change the color of a specific cell? Write necessary code to demonstrate the
answer to the question
Q.No.2. The cell contents of the <TH> tag is always bold. Is this statement true? Give reason.
What is the need for “colspon” and “Rowspan”?
<TR> tag (Table Row tag)
The <TR> Tag is used to specify row within a table and is placed inside the <TABLE> TAG.
Syntax:
<tr Align =”Left/Right/Center”
Bgcolor= “Color”
Valign=”Align-type”>
<tr>
Attributes of Table Row –TR Tag
Attributes Description
Align Position the text horizontally in all cells in a row. It may take on the values
Left, Center, Right. Left is the default horizontal alignment.

Positions the vertically in all cells in row. It may take on the values Top,
Valign Middle, Bottom and Baseline. Middle is the default vertical alignment.

Bgcolor Specifies a background colour for all the cells in a row using colour codes

<TD> tag (table data) The <TD> Tag is used to define a table data cell
Syntax:
<td
Align = ”left/right/center”
Bgcolor = ”color”
Width = ”value”
Background = ”filename”
Rowspan = ”value”
Colspan = ” value”
Valign = ”align-type”>
Data in the cell
</td>
4

Attributes of Table Data –TD tag

Attributes Description

Align Positions the text horizontally in all cells in a row. It may take on
the values Left, Center, left is the default horizonal alignment.
.Positions the values Top, Middle, Bottom and Baseline. Middle
Valign is the default vertical alignment.
Specifies the width of a cell in pixles on as a percentage relative
to the table width.
Width Specifies a background color for a single cell using color codes.
An image can be set as a background of an individual cell. The
Bgcolor filename of image file is specified here.

background
Rows pan Indicates the number of rows a cell should occupy.
Cols pan Indicates the number of columns a cell should occupy.

The <TH> Tag: is used to define a Table Header Cell.


Syntax:
<th Align=”left/center/right”
Bgcolor =”color”
Background =”rename”
Row span =”value”
Cols pan =”value”
Valign = align-type>
Heading of column or row.
<th>

Attributes of Table Data –TH tag

Attributes Description

COLSPAN Indicates number of columns the cell spans

ROWSPAN Indicates number of rows the cell spans

NOWRAP Keeps off browser from wrapping automatically

CPTIONS <CAPTION> Tag allows the creation of a caption for a Table


Syntax:
<caption align= “Top/Bottom”
Caption of the table
5
</caption>

You might also like