Total Pageviews

Thursday, January 22, 2015

how to create html template using table tag

how to create html template using table tag











<TABLE> </TABLE>  The Table Tag

<table > tag is paired Tag  
Let’s Take Coding example of table of 2 by 2
<table>  <tr>
               < td> Name </td>           
                <td> Roll No </td>
              </tr>
                <tr>
               < td> Prakash </td>           
                <td> 56</td>
              </tr>
 </table>
output
Name
Roll No
Prakash
56
Lets understand  attribute of each tag


<TABLE  BORDER=??> </TABLE> (pixels)
<table border=0>
0
0
0
0
<table border=1>
1
1
1
1
<table border=5>
5
5
5
5
<TABLE  CELLSPACING=?> </TABLE> (pixels)
<table cellspacing=0>
0
0
0
0
<table cellspacing=1>
1
1
1
1
<table cellspacing=4>
8
8
8
8
Cellspacing refers to the width between border lines.
Can be used to put space between cells / objects in invisible tables - ie border=0.
<TABLE CELLPADDING=?> </TABLE> (pixels)
<table cellpadding=0>
0
0
0
0
<table cellpadding=3>
3
3
3
3
<table cellpadding=9>
9
9
9
9
Cellpadding refers to the minimum space between objects and the inner table border.
Can be used to put space between cells / objects in invisible tables - ie border=0.
<TABLE WIDTH=?> </TABLE> (in pixels)
<table width=50>
*
*
*
*
<table width=75
*
*
*
*
<table width=100>
*
*
*
*
The width of these tables have each been set to a fixed number of screen pixels.
<TABLE WIDTH=%> </TABLE> (percentage of ??)
<table width=25%>
*
*
*
*
<table width=45%>
*
*
*
*
<table width=90%>
*
*
*
*

<TR> </TR>
Table Rows <tr> enclose the Table Data Cells <td>. TR tags must be a pair. <tr>...</tr>
<table><tr><td>......</td>
<td>......</td></tr></table>
To have a data cell you must first have a Table, a Row <tr> and then the data cells(s) <td>. In other words, all data cells must be contained within Table Rows (see TD below).
<TD> </TD> (must appear within table rows)
Table Data cells contain the objects placed in a table. Table Data cells <td> must be enclosed by Table Row tags <tr>. TD tags must be a pair. <td>...</td>
<table><tr><td>......</td>
<td>......</td></tr></table>

<TD ALIGN=left|right|center> </TD>
Alignment controls the justification of objects in a data cell.
<td align=left>
Foo Bar
</td>
<td align=center>
Foo Bar
</td>
<td align=right>
Foo Bar
</td>
The alignment attributes listed in the heading should be self explanatory.
<TD VALIGN=top|middle|bottom> </TD>
Vertical Alignment controls the position of objects in a data cell.
<td valign=top>
...</td>
<td valign=center>
...</td>
<td valign=bottom>
...</td>
just
some
fill
text
The vertical alignment attributes listed in the heading should be self explanatory.
<TD NOWRAP> </TD>
Nowrap means no line breaks in text objects.
Foo Bar and waffle!
Foo Bar and waffle etc!
<td nowrap>...</td>
Here the table has been forced to a minimum size of 100 pixels, although it can not reduce to this size because the right hand cell is set with the <td nowrap>...</td> attribute. The text in the left hand cell has wrapped because its width is minimised by the force of the text in the "nowrap" cell.
<TD COLSPAN=?> </TD>
Make one data cell wider than others above and/or below. (spans multiple columns)
Table Data 1
Table Data 2
<tr>
<td>Table Data 1</td>
<td>Table Data 2</td>
</tr><tr>
<td colspan=2>This cell</td>
</tr>

<TD ROWSPAN=?> </TD>
Make one column cell higher than others next to it. (spans multiple rows)
Table Data 1
<tr>
<td>Table Data 1</td>
<td rowspan=2>This cell</td>
</tr><tr>
<td>Table Data 2</td>
</tr>
Table Data 2

<TD WIDTH=?> </TD> (in pixels)
Set the width of individual Table Cells in pixels.
75
15
40
"
"
"
Each data cell <td> tag includes a width=??? attribute. (a minimum width in screen pixels)
<TD WIDTH="??%"> </TD> (percentage of table)
Equal Table Data cells.
33
33
33
%
Uneven cells
15
35
50
%
%
Uneven cells
20
20
60
%
%

<TD BGCOLOR="#rrggbb"> </TD>
Setting the background colour of individual Table Data cells
#999900
#FF9900
#996699

<TH> </TH> (same as TD, except text is bold)
Table Header cell.
Table Header cell
Table Data cell
<tr>
<th align="center" width="50%">Table Header cell</th>
<td align="center" width="50%">Table Data cell</td>
</tr>
<tr>
<td colspan="2" align="center">This is this cell</td>
</tr>

<TH ALIGN=left|right|center> </TH>
Default Bold text, otherwise refer to the <TD ALIGN= attributes.
<TH VALIGN=top|middle|bottom> </TH>
Default Bold text, otherwise refer to the <TD VALIGN= attributes.
<TH NOWRAP> </TH>
Default Bold text, otherwise refer to the <TD NOWRAP= attributes.
<TH COLSPAN=?> </TH>
Default Bold text, otherwise refer to the <TD COLSPAN= attributes.
<TH ROWSPAN=?> </TH>
Default Bold text, otherwise refer to the <TD ROWSPAN= attributes.
<TH WIDTH=?> </TH> (in pixels)
Default Bold text, otherwise refer to the <TD WIDTH= attributes.
<TH WIDTH="%"> </TH> (percentage of table)
Default Bold text, otherwise refer to the <TD WIDTH= % attributes.
<TH BGCOLOR="#rrggbb"> </TH>
Default Bold text, otherwise refer to the <TD BGCOLOR= attributes. an extention.
<CAPTION> </CAPTION> (above or below table)
A Table Caption appears without table borders.
<table><caption>Foo Bar</caption>...
Table Data cell
Table Data cell
Table Data cell - colspan=2








This table tag and its attributes are used to place captions at the top or bottom of tables.
<CAPTION ALIGN=top|bottom> </CAPTION>

Popular Posts

Follow by Email