- Details
- Category: Bacis Html
- Hits: 1073
Table
Syntax: <TABLE>...</TABLE>
TABLE was commonly used to layout web pages, try to use style sheet in place of tables for layout.
Code example below
Below is a example of a table with 3 rows and with 3 cells.
<table width="100%">
<tr bgcolor="gold">
<td style="height: 50px">
</td>
<td style="height: 50px">
</td>
<td style="height: 50px">
</td>
</tr>
<tr bgcolor="maroon">
<td style="height: 50px">
</td>
<td style="height: 50px">
</td>
<td style="height: 50px">
</td>
</tr>
<tr bgcolor="black">
<td style="height: 50px">
</td>
<td style="height: 50px">
</td>
<td style="height: 50px">
</td>
</tr>
</table>
Two rows with four cells with links in top row.
| Home | What New | ASP Example | To Do List |
<center>
<table align="Left" border="0" bordercolor="maroon" cellpadding="0" cellspacing="0"
width="35%">
<col bgcolor="black" style="color: gold" width="1%">
<col bgcolor="black" style="color: gold" width="1%">
<col bgcolor="black" style="color: gold" width="1%">
<col bgcolor="black" style="color: gold" width="1%" />
<tr>
<td>
<a href="http://www.grants-web.com/"><font color="gold">Home</font></a></td>
<td>
<a href="http://www.grants-web.com/dotnetnuke/"><font color="gold">What New</font></a></td>
<td>
<a href="http://www.grants-web.com/dotnetnuke/ASPExample/tabid/56/Default.aspx"><font
color="gold">ASP Example</font></a></td>
<td>
<a href="http://www.grants-web.com/dotnetnuke/ToDoList/tabid/59/Default.aspx"><font
color="gold">To Do List</font></a></td>
</tr>
<tr>
<td bgcolor="maroon" bordercolordark="maroon" height="30">
</td>
<td bgcolor="maroon" height="30">
</td>
<td bgcolor="maroon" height="30">
</td>
<td bgcolor="maroon" height="30">
</td>
</tr>
</table>
</center>
Column Example
Two row with 3 cell each with difference color fonts and backgrounds.
| This is column 1, cell 1 you can enter text or images here | This is column 2, cell 2 you can enter text or images here | This is column 3, cell 3 you can enter text or images here |
| This is column 1, cell 4 you can enter text or images here This is column 1, cell 4 you can enter text or images here This is column 1, cell 4 you can enter text or images here | This is column 2, cell 5 you canenter text or images here | This is column 3, cell 6 you canenter text or images here |
<center>
<table align="Center" border="0" cellpadding="0" cellspacing="0" width="100%">
<col bgcolor="black" style="color: gold" width="40%">
<col bgcolor="black" style="color: red" width="40%">
<col bgcolor="black" style="color: white" width="20%" />
<tr>
<td align="left">
This is column 1, cell 1 you can enter text or images here</td>
<td align="left">
This is column 2, cell 2 you can enter text or images here</td>
<td align="left">
This is column 3, cell 3 you can enter text or images here</td>
</tr>
<tr>
<td align="left">
This is column 1, cell 4 you can enter text or images here This is column 1, cell
4 you can enter text or images here This is column 1, cell 4 you can enter text
or images here</td>
<td align="left">
This is column 2, cell 5 you canenter text or images here</td>
<td align="left">
This is column 3, cell 6 you canenter text or images here</td>
</tr>
</table>
</center>
Bordercolor="blue" with a link images inside.
 |
<center>
<table border="10" bordercolor="blue" height="300" width="300">
<tr>
<td>
<a href="/../html/default.aspx">
<img src="/../Images/arrow-back_32.png" /></a>
</td>
</tr>
</table>
</center>
Table with Caption
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 3 | Row 2 Cell 4 |
| Row 3 Cell 5 | Row 3 Cell 6 |
<table id="myTable" align="center" border="8" cellpadding="5" cellspacing="5" width="200">
<caption id="myCaption" style="color: blue" valign="top">
Caption for table with rows and cells.
</caption>
<tr>
<td>
Row 1 Cell 1</td>
<td>
Row 1 Cell 2</td>
</tr>
<tr>
<td>
Row 2 Cell 3</td>
<td>
Row 2 Cell 4</td>
</tr>
<tr>
<td>
Row 3 Cell 5</td>
<td>
Row 3 Cell 6</td>
</tr>
</table>
</center>