Basic HTML table layout Tutorial

	Sign In Sign-Up

Basic Tutorial for HTML Tables

Home page Basic html Text and font tags Html forms JavaScript Free Tracking Website hosting Free traffic

Easy webpage layout can be done with tables.
Tables divide the page into separate sections.
Invisible tables have no borders.
Add different color to different page sections.
Add interactive forms.

BASIC HTML TABLE LAYOUT

TABLE CAPTION ( OPTIONAL )
<==== TABLE COLUMES ====>
^ R O w S v	Data Cell
	Data Cell

TABLE CAPTION ( OPTIONAL )
1
2	3
	4

CODE FOR THIS TABLE
<table bgcolor="#000000" width="300" cellpadding="0" cellspacing="0" border="1">
<caption>TABLE CAPTION ( OPTIONAL )</caption>
<tr>
<td bgcolor="#ffffff" align="center" colspan="2">
1
</td></tr>
<tr>
<td bgcolor="#ffffff" valign="top" align="left" Rowspan="2">
2
</td>
<td bgcolor="#ffffff" align="center">
3
</td></tr>
<tr>
<td bgcolor="#ffffff" align="left">
4
</td></tr>
</table>

TABLE CAPTION ( OPTIONAL )
1
2	3
	4

SAME TABLE WITH NO BORDER
No valign for 2

TABLE CAPTION ( OPTIONAL )
1
2	3
	4

SAME TABLE WITH cellpadding="10"

TABLE CAPTION ( OPTIONAL )
1
2	3
	4

SAME TABLE WITH cellspacing="10"
CELL 3 bgcolor="#FFFF00"

TABLE CAPTION ( OPTIONAL )
1
2	3
	4

SAME TABLE WITH cellspacing="2"
Table bgcolor="#FFFF00"

EXAMPLE CODE SHOWN WITHOUT COLOR / ALIGN CODE, CELL TEXT, DATA, OR FORM CODE

HTML	Tables	Images	Links	Faqs
Table parts tr td bgcolor colspan rowspan cellpadding cellspacing align valign border	Using tables to divide pages into different sections. To add contents to your table you will need to use tags. In this section align is left and valign is top.			Find answers to your HTML questions
An example of a webpage table layout with 5 columes and 3 rows