Tables:
HTML tables mark up data that should be organized in table structure,instead of in paragraph or other block level structure.with table you can present data organized in rows & columns.
<TABLE>tag:
In html table can be created by start tag <TABLE> & end tag </TABLE> .with <TABLE> tag you can determined the following formatting options for your table.
All table related tags with different table elements can be inserted within <TABLE> & </TABLE>.
ATTRIBUTES:
1. ALIGN:
It controls the alignment to left,right & center.
2. BORDER:
It sets the table border in the form of pixels.
3. CELLPADDING:
It controls the distance between data & boundries of cell.
4. CELLSPACING:
In controls the distance between. Adjacent cells
5. COLSPAN:
This attributes is used when we want to merge no. of columns
6. ROWSPAN:
This attributes is used when we want to merge no. of rows
7. WIDTH:
It sets the width of table.
8. VALIGN:
VALIGN controls the vertical alignment of the cell content to top, middle or bottom.
<CAPTION>tag:
<CAPTION>tag is used to create a caption on top of or below the table.
It requires <CAPTION>start tag & </CAPTION>end tag.
It can be used with ALIGN attribute.
For example:
<CAPTION ALIGN=”TOP”>Yesterday’s weather</CAPTION>
<TR>:
<TR>tag is used to define a row within table.<TR>tag ends with </TR>.
<TR> is a row tag.
It creates a horizontal row of cells and contains table heading & table data.
Each use of a table row element begins a new table row.
ATTRIBUTES:
1. BGCOLOR: Background color
2. ALIGN: left, Right & center alignment
3. VALIGN: Vertical alignment
<TH>tag:
These tag can be inserted inside the <TR> tag.
<TH> tag is used to provide the table heading.
<TD>tag:
<TD>tag describes data in the table.
ATTRIBUTES:
1. ALIGN: left, Right & center alignment
2. VALIGN: Vertical alignment
3. Width: Set the width
4. Hight: Set the hight
5. COLSPAN: This attributes is used when we want to merge no. of columns
6. ROWSPAN: This attributes is used when we want to merge no. of rows
EXCERSIZE 7:
EXCERSIZE 6:
Write a HTML code for display the following table:
City
|
High
|
Low
|
Wind
|
Aurangabad
|
30
|
20
|
South
|
Latur
|
32
|
21
|
South
|
Osmanabad
|
22
|
west
| |
Nanded
|
25
|
West
| |
Jalna
|
33
|
20
|
south
|
<HTML>
<HEAD>
<TITLE> EXCERSIZE 6</TITLE>
</HEAD>
<BODY>
<TABLE><CAPTION> Yesterday’s weather</CAPTION>
<TR>
<TH>City</TH>
<TH>High</TH>
<TH>Low</TH>
<TH>Wind</TH>
</TR>
<TR>
<TD>Aurangabad</TD>
<TD>30</TD>
<TD>20</TD>
<TD>south</TD>
</TR>
<TR>
<TD>Latur</TD>
<TD>32</TD>
<TD>21</TD>
<TD>south</TD>
</TR>
<TR>
<TD>Osmanabad</TD>
<TD>35</TD>
<TD>22</TD>
<TD>west</TD>
</TR>
<TR>
<TD>Nanded</TD>
<TD>39</TD>
<TD>25</TD>
<TD>west</TD>
</TR>
<TR>
<TD>Jalna</TD>
<TD>33</TD>
<TD>20</TD>
<TD>south</TD>
</TR>
</BODY>
</HTML>
EXCERSIZE 7:
Write a HTML code for display the following table:
<HEAD>
<TITLE>Merit List</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="2">
<TR>
<TH ROWSPAN ="2">Sr.No.</TH>
<TH ROWSPAN="2"> Student Name</TH>
<TH COLSPAN="3"> Marks Obtained</TH>
<TH ROWSPAN="2"> TOTAL</TH>
</TR>
<TR>
<TD> TEST 1</TD>
<TD> TEST 2</TD>
<TD> TEST 3</TD>
</TR>
<TR>
<TD> 1</TD>
<TD>Rahul</TD>
<TD>150</TD>
<TD>150</TD>
<TD>150</TD>
<TD>450</TD>
</TR>
<TR>
<TD> 2</TD>
<TD>Sachin</TD>
<TD>129</TD>
<TD>130</TD>
<TD>131</TD>
<TD>390</TD>
</TR>
<TR>
<TD> 3</TD>
<TD>Mahendra</TD>
<TD>125</TD>
<TD>115</TD>
<TD>120</TD>
<TD>360</TD>
</TR>
</TABLE>
</BODY>
</HTML>
EXCERSIZE 8:
Write a HTML code for display the following table:
Pav Bhaji
|
Without Cheese
|
700 calories
|
With Cheese
|
750 calories
|
<HTML>
<HEAD>
<TITLE>Nutritian Data</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD ROWSPAN=”2”>Pav Bhaji</TD>
<TD>Without Cheese</TD>
<TD>700 calories</TD>
</TR>
<TR>
<TD>With Cheese</TD>
<TD>750 calories</TD>
</TR>
</TABLE>
</BODY>
</HTML>
No comments:
Post a Comment