4)CELLSPACING=value
This defines the space, in pixels, inserted between individual cells in a table.
5)CELLPADDING=value
This defines the space, in pixels, inserted between the border of the cell and the contents of the cell.
6)WIDTH=value|percent
This defines the width of the table or width of cell or width of a row, either in pixels or in terms of percentage of the document width.
6)HEIGHT=value|percent
This defines the HEIGHT of the table or HEIGHT of cell or HEIGHT of a row, either in pixels or in terms of percentage of the document HEIGHT.
7)NOWRAP
Inclusion of this attribute specifies that lines within the cell should not be broken (wrap) to fit the cell width.
TRY THIS EXAMPLE:
| <TABLE BORDER=1>
<TR>
<TH>HEADING</TH>
<TH>HEADING</TH>
</TR>
<TR VALIGN="BOTTOM" ALIGN="CENTER">
<TD HEIGHT=35>Ganesh</TD>
<TD NOWRAP>Krishna is a prominent personality in Mahabharatha .</TD>
</TR>
<TR VALIGN="TOP">
<TD WIDTH=200 ALIGN="RIGHT">Hanuman</TD>
<TD HEIGHT=35>Rama</TD>
</TR>
</TABLE> |
| HEADING | HEADING | | Ganesh | Krishna is a prominent personality in Mahabharatha | | Hanuman | Rama |
|
8)Merging cells
The next step in creating your desired table is to merge cells where required. You can combine cells so that they span 2 or more columns, or 2 or more rows. This is done using the COLSPAN and ROWSPAN attributes as follows:
COLSPAN=value
Used to specify how many columns a cell should span.
ROWSPAN=value
Used to specify how many rows a cell should span.
Note down the following example
|
<table width="100%" border="1" bordercolor="indigo">
<tr><td> first cell</td><td>second cell</td><td> third cell</td></tr>
<tr><td> fourth cell</td><td>fifth cell</td><td> sixth cell</td></tr>
<tr><td> seventh cell</td><td>eighth cell</td><td> nineth cell</td></tr>
<tr><td> tenth cell</td><td>11th cell</td><td> 12th cell</td></tr>
<tr><td> 13th cell</td><td>14th cell</td><td> 15th cell</td></tr>
<tr><td> 16th cell</td><td>17th cell</td><td> 18th cell</td></tr>
<table/>
|
| first cell | second cell | third cell |
| fourth cell | fifth cell | sixth cell |
| seventh cell | eighth cell | nineth cell |
| tenth cell | 11th cell | 12th cell |
| 13th cell | 14th cell | 15th cell |
| 16th cell | 17th cell | 18th cell |
|
The above is a simple table and now you merge first,second ,third cells and
4th,7th,10th cells and 14th,15th,17th and 18th cells as follows:
|
<table width="100%" border="1" bordercolor="indigo">
<tr><td colspan="3"align="center">mergedcell</td></tr>
<tr><td rowspan="3"align="center"> mergedcell</td><td>fifth cell</td><td> sixth cell</td></tr>
<tr><td>eighth cell</td><td> nineth cell</td></tr>
<tr><td>11th cell</td><td> 12th cell</td></tr>
<tr><td> 13th cell</td><td colspan="2" rowspan="2"align="center">mergedcell</td></tr>
<tr><td> 16th cell</td></tr>
<table/>
|
| merged |
| merged cell | fifth cell | sixth cell |
| eighth cell | nineth cell |
| 11th cell | 12th cell |
| 13th cell | merged cell |
| 16th cell |
|
9)Formatting columns
Using <COL> or <COLGROUP> tags you can now specify the text alignment for table columns. Essentially this element lets you format cells in a column, in the same manner that <TR> lets you format cells in a row. You should use <COLGROUP> to format 2 or more columns at a time and the <COL> element to format individual columns. The <COL> element should always be contained within <COLGROUP></COLGROUP> tags. The attributes are explained below:
Example:
| <TABLE BORDER=1 WIDTH=80%>
<COLGROUP>
<COL ALIGN="left">
<COL ALIGN="right" VALIGN="bottom">
</COLGROUP>
<COLGROUP SPAN=2 ALIGN="center" VALIGN="top">
</COLGROUP>
<TR>
<TH>SCIENCE</TH>
<TH>MATHS</TH>
<TH>HISTORY</TH>
<TH>ARTS</TH>
</TR>
<TR>
<TD HEIGHT=35>Ganesh</TD>
<TD>RAGHU</TD>
<TD>VENKAT</TD>
<TD>Krishna</TD>
</TR>
<TR>
<TD HEIGHT=35>Hanuman</TD>
<TD>SATYAM</TD>
<TD>ROHIT</TD>
<TD>Rama</TD>
</TR>
</TABLE> |
| SCIENCE | MATHS | HISTORY | ARTS | | Ganesh | RAGHU | VENKAT | Krishna | | Hanuman | SATYAM | ROHIT | Rama |
|
10)TABLE COLOURS
The color attribute with tables is two types one is bgcolor and the other is bordercolor. The bgcolor attribute defines the background color of the table or cell or a row or a column as mentioned in the code. The bordercolor is again three types one is simple bordercolor and the remaining two attributes are "bordercolordark" and "bordercolorlight". The bordercolordark and bordercolorlight are used along with bordercolor attribute and when these three attributes are used the border appears in a different style with 3d effect.Follow the example here:-
|
<table border="3"bgcolor="00ffff"
bordercolor="indigo"width="100%"height="100">
<tr><th>SCIENCE</Th>
<th>ARTS</th></tr>
<tr bordercolor="red"bgcolor="green">
<td>ganesh</td> <td>krishna</td></tr>
<tr bordercolor="red"bgcolor="green"><td bordercolor="yellow">Hanuman</td><td bgcolor="White">Rama</td></tr>
<tr bordercolor="orange" bordercolordark="blue" bordercolorlight="white"><td>Venkat</td><td>Abhiram</td></tr>
</table> |
| SCIENCE | ARTS |
|---|
| ganesh | krishna | | Hanuman | Rama | | Venkat | Abhiram |
|
11)background images
the background attribute helps to set the background of the table with an image the background attribute is written as follows:- <table background="imagename with location">
Example of code:-
| <table width="100%"border="1" background="f1.jpg">
<tr><th width="50%">heading1</th>
<th width="50">heading2</th>
</tr> <tr> <td>cell1</td>
<td>cell2</td></tr>
<tr><td>cell3</td>
<td>cell4</td></tr>
</table> |
| heading1 | heading2 |
|---|
| cell1 | cell2 | | cell3 | cell4 |
|
Note:font size and color of the text can be decided only with each individual cells.(ie. with <td> tags only)The table creation chapter is closed and now you must be able to create webpages with text and tables. If not I once again study the first four chapters and only after satisfactory completion you to to next chapter.
|
