Wednesday, March 11, 2020

HTML : Working with TABLES


 TABLES in HTML:

Roll No.
Name
Class
1001
Rashmi
PGDCA
1002
Bhavika
DCA
1003
Monika
BCA
1004
Abhilasha
MCA
1005
Kamna
B.Sc. – CS



<TABLE> Tag: We can place our data in web page using Tables. Tables may contain Table Rows, Table Heading and Table Data. This tag is used to create a table and contain table items like <TR>, <TH>, <TD>, etc. Start and end tags both are required and supported by all the browsers.

Attribute
Specification and Value
BORDER
It sets the border width in pixels
BORDERCOLOR
It sets color of the border
BGCOLOR
Back ground color of the table
BACKGROUND
It specifies background image
CELLSPACING
It gives the distance between cells
CELLPADDING
It sets the spacing between cell wall and cell content
HSPACE/VSPACE
It sets the horizontal/vertical padding (space) for the entire table
HEIGHT/WIDTH
We can set cell height/Width in pixels for entire table
ALIGN
LEFT, CENTER, RIGHT
STYLE
Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE
Title of the tag (like “ToolTipText” in VB)



<TR> Tag: It creates a row in a table and contains <TH> and <TD>. Start and end tags both are required.

Attribute
Specification and Value
ALIGN
LEFT, RIGHT, CENTER (Horizontal Alignment)
VALIGN
It sets the vertical alignment of the data in current row.
TOP, MIDDLE, BOTTOM
BGCOLOR
Only for current Row
BORDERCOLOR
Colour of the border
STYLE
Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE
Title of the tag (like “ToolTipText” in VB)



<TH> Tag: It specifies table heading and usually displayed in BOLD and placed inside the <TR> tag. Start tag is required and end tag is optional.

Attribute
Specification and Value
ROWSPAN
It merges cells of a COLUMN and creates single cell.
COLSPAN
It merges cells of a ROW and creates a single cell.
ALIGN
LEFT, RIGHT, CENTER (Horizontal Alignment)
VALIGN
It sets the vertical alignment of the data in current cell.
TOP, MIDDLE, BOTTOM
BACKGROUND
Background image for current cell
BGCOLOR
Background colour for current cell
BORDERCOLOR
Colour of the border
HEIGHT/WIDTH
We can set cell height/Width in pixels for current cell
STYLE
Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE
Title of the tag (like “ToolTipText” in VB)



<TD> Tag: It specifies table data for a table cell and placed inside the <TR> tag. Start tag is required and end tag is optional.

Note: All attributes are same as <TH> tag.


Attribute
Specification and Value
ROWSPAN
It merges cells of a COLUMN and creates single cell.
COLSPAN
It merges cells of a ROW and creates a single cell.
ALIGN
LEFT, RIGHT, CENTER (Horizontal Alignment)
VALIGN
It sets the vertical alignment of the data in current cell.
TOP, MIDDLE, BOTTOM
BACKGROUND
Background image for current cell
BGCOLOR
Background colour for current cell
BORDERCOLOR
Colour of the border
HEIGHT/WIDTH
We can set cell height/Width in pixels for current cell
STYLE
Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE
Title of the tag (like “ToolTipText” in VB)



<CAPTION> Tag: This tag is used to specify caption (name) of the table, means we can give a name to a table using this tag and used inside the <TR> tag. Start and end tags both are required.



~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~



Example:
<HTML>
          <HEAD><TITLE>Working with Table in web page </TITLE></HEAD>

          <BODY BGCOLOR=“AQUA” TEXT=“PURPLE”>
                    <CENTER><H1>Student Information</H1></CENTER>
                    <TABLE BORDER=“3” BORDERCOLOR=“BLUE”
          CELLPADDING=“30” CELLSPACING=“20” ALIGN=“CENTER”>
                             <TR>
<TH>ROLL NO
                                      <TH>NAME
                                      <TH>CLASS
                             </TR>

                             <TR>
<TD>1001
                                      <TD>RASHMI
                                      <TD>B.Sc. – CS
                             </TR>

                             <TR>
<TD>1002
                   <TD>MONIKA
                   <TD>B.Sc. – IT
          </TR>

          <TR>
<TD>1003
                   <TD>ABHILASHA
                   <TD>B.Sc. – PCM
          </TR>

          <TR>
<TD>1004
                   <TD>KAMNA
                   <TD>B.Sc. – CS
          </TR>

          <TR>
<TD>1005
                   <TD>BHAVIKA
                   <TD>B.Sc. – CS
          </TR>
                    </TABLE>
          </BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~