advanced html

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

Table: -                

            (Border, Border Color, Height, Width, Align, Cell Spacing, Cell Pading, Bgcolor, Frame)

Table Rows: -     

            (Align, Valign, Rowspan, Colspan)

Table Heading: - 

and are used to create a row of the table.

5.                 The table data tags

are used to specify the contents of a cell.

6.                

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

7.                 The caption tags

tags allows for the creation of a caption for a table.

The

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.                

begins a table definition and ends it. Tables are created without a border that is the horizontal and vertical lines separating the cells will not appear by default.

4.                

and

(Align, Rowspan, Colspan) Table Data: -	(Align, Valign, Rowspan, Colspan, Bgcolor, Background) Caption: -
and	and

tag

The

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 and tags must surround the entire table definition. The has several attributes. All the table attributes are optional.              

    Syntax:                     

 

                           Border=”value”

                           Border color=”color”

                           Width =”value”

                           Height=”Value”

                           Bgcolor= “color”

                           Cell spacing= “value”

                            Frame= “frame type”>

                   ……….

         

Attributes of  TABLE Tag
Attribute	Description
Border Border color Height Width Cell spacing                      Cell padding Bgcolor                     Align                        Frame                      Background	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. Assigns a color to the border in hexadecimal triplets or codes. 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. 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 means the space between the cell border and table frame. This space can be adjusted in pixels. Cell padding is the space between the cell border and table frame. This space can be adjusted in pixels. Background color can assigned a color using color codes. Aligns the table with respect to other document elements 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. 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

           

(a)                Differentiate between cell spacing and cell padding.

(b)               Briefly describe three attributes of

tag other than cell spacing, cell padding and border.

Q.No.2. If you specify RED to the bgcolor attribute of

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

tag (Table Row tag)

The

Tag is used to specify row within a table and is placed inside the

tag is always bold. Is this statement true? Give reason. What is the need for “colspon” and “Rowspan”?

TAG.    

             Syntax:

                         

        Align =”Left/Right/Center”

                                       Bgcolor= “Color”

                                       Valign=”Align-type”>

                          

     

Attributes of Table Row –TR  Tag
Attributes	Description
Align Valign Bgcolor	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, Middle, Bottom and Baseline. Middle is the default vertical alignment. Specifies a background colour for all the cells in a row using colour codes

       

tag (table data)        The Tag is used to define a table data cell

                Syntax:

                   

                                    Align    = ”left/right/center”

                                    Bgcolor = ”color”

                                    Width = ”value”

                                    Background = ”filename”

                                   Rowspan = ”value”

                                   Colspan = ” value”

                                  Valign = ”align-type”>

                                    Data in the cell

                   

Attributes of Table Data –TD tag
Attributes	Description
Align Valign Width Bgcolor background	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 is the default vertical alignment. Specifies the width of a cell in pixles on as a percentage relative to the table 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 filename of image file is specified here.
Rows pan	Indicates the number of rows a cell should occupy.
Cols pan	Indicates the number of columns a cell should occupy.

               

The

Tag:       is used to define a Table Header Cell.

 Syntax:

                             

           Align=”left/center/right”

                                             Bgcolor               =”color”

                                             Background         =”rename”

                                             Row span           =”value”

                                             Cols pan             =”value”

                                             Valign                  = align-type>

                                    Heading of column or row.

                            

Attributes of Table Data –TH tag
Attributes	Description
COLSPAN ROWSPAN NOWRAP	Indicates number of columns the cell spans Indicates number of rows the cell spans Keeps off browser from wrapping automatically

CPTIONS 

Tag allows the creation of a caption for a Table

            

               Syntax:

                           

                                        Caption of the table