Htaccess    html   Php    javascript   Asp   css    maths  Past Questions  Practice Tests Online

Html table tag code learning guide 2012 Donate at flattr Flattr this





Alert! Connect with 10,000 Chating Online. Join Now

Html table


Learn html table codes and tags using the sample below.

Html table

TABLE

(Note: this information applies to HTML 3.2 tables.
Future references will support the full HTML 4.0 table model.)

Contents:

  1. TABLE (general overview)

  2. ALIGN
  3. BGCOLOR (TABLE)
  4. BGCOLOR (TD)
  5. BORDER
  6. CAPTION
  7. CELLPADDING
  8. CELLSPACING
  9. COLSPAN
  10. ROWSPAN
  11. VALIGN
  12. WIDTH

TABLE

CODE BROWSER
<TABLE>

  <TR>

    <TD>Data 1</TD>

    <TD>Data 2</TD>

  </TR>

  <TR>

    <TD>Data 3</TD>

    <TD>Data 4</TD>

  </TR>

</TABLE>


Data 1 Data 2
Data 3 Data 4



<TR> = Row

<TD> = Data Cell (Column)

Back to top


TD ALIGN

CODE
<TABLE>

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

    <TH>Header 3</TH>

  </TR>

  <TR>

    <TD ALIGN="LEFT">Data 1</TD>

    <TD ALIGN="CENTER">Data 2</TD>

    <TD ALIGN="RIGHT">Data 3</TD>

  </TR>

</TABLE>
BROWSER

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3


Back to top

TABLE BGCOLOR

CODE BROWSER
<TABLE BGCOLOR="#FFFF00">

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

  </TR>

  <TR>

    <TD>Data 1</TD>

    <TD>Data 2</TD>

  </TR>

  <TR>

    <TD>Data 3</TD>

    <TD>Data 4</TD>

  </TR>

</TABLE>
BGCOLOR="#FFFF00"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
BGCOLOR="yellow"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back to top

TD BGCOLOR

CODE
<TABLE BGCOLOR="silver">

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

  </TR>

  <TR>

    <TD BGCOLOR="#FFFF00">Data 1</TD>

    <TD>Data 2</TD>

  </TR>

  <TR>

    <TD>Data 3</TD>

    <TD BGCOLOR="yellow">Data 4</TD>

  </TR>

</TABLE>
BROWSER

Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back to top

TABLE BORDER

CODE BROWSER
<TABLE BORDER="2">

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

  </TR>

  <TR>

    <TD>Data 1</TD>

    <TD>Data 2</TD>

  </TR>

  <TR>

    <TD>Data 3</TD>

    <TD>Data 4</TD>

  </TR>

</TABLE>
BORDER="2"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
BORDER="0"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back to top

<TABLE><CAPTION>

CODE
<TABLE BORDER="2">

<CAPTION>This is a caption</CAPTION>

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

  </TR>

  <TR>

    <TD>Data 1</TD>

    <TD>Data 2</TD>

  </TR>

  <TR>

    <TD>Data 3</TD>

    <TD>Data 4</TD>

  </TR>

</TABLE>
BROWSER
This is a caption
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back to top

TABLE CELLPADDING

CODE BROWSER
<TABLE CELLPADDING="0">

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

  </TR>

  <TR>

    <TD>Data 1</TD>

    <TD>Data 2</TD>

  </TR>

  <TR>

    <TD>Data 3</TD>

    <TD>Data 4</TD>

  </TR>

</TABLE>
CELLPADDING="0"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
CELLPADDING="7"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back to top

TABLE CELLSPACING

CODE BROWSER
<TABLE CELLSPACING="0">

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

  </TR>

  <TR>

    <TD>Data 1</TD>

    <TD>Data 2</TD>

  </TR>

  <TR>

    <TD>Data 3</TD>

    <TD>Data 4</TD>

  </TR>

</TABLE>
CELLSPACING="0"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
CELLSPACING="7"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back to top

TD COLSPAN

CODE
<TABLE>

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

  </TR>

  <TR>

    <TD COLSPAN="2">Data 1</TD>

  </TR>

  <TR>

    <TD>Data 3</TD>

    <TD>Data 4</TD>

  </TR>

</TABLE>
BROWSER

Header 1 Header 2
Data 1
Data 3 Data 4


Back to top

TD ROWSPAN

CODE
<TABLE>

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

  </TR>

  <TR>

    <TD ROWSPAN="2">Data 1</TD>

    <TD>Data 2</TD>

  </TR>

  <TR>

    <TD>Data 4</TD>

  </TR>

</TABLE>
BROWSER

Header 1 Header 2
Data 1 Data 2
Data 4


Back to top

TD VALIGN

CODE
<TABLE>

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

    <TH>Header 3</TH>

  </TR>

  <TR>

    <TD VALIGN="TOP">Data 1</TD>

    <TD VALIGN="MIDDLE">Data 2</TD>

    <TD VALIGN="BOTTOM">Data 3</TD>

  </TR>

</TABLE>
BROWSER

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3


Back to top

TABLE WIDTH

CODE BROWSER
<TABLE WIDTH="75%">

  <TR>

    <TH>Header 1</TH>

    <TH>Header 2</TH>

  </TR>

  <TR>

    <TD>Data 1</TD>

    <TD>Data 2</TD>

  </TR>

  <TR>

    <TD>Data 3</TD>

    <TD>Data 4</TD>

  </TR>

</TABLE>
WIDTH="75%" (percent)
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
WIDTH="125" (pixels)
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back to top



Html table source code

 

Html table tutorial

Html table code on this is provided for your study purpose, it will guide you to know how create and design a website using html. use it to practice and train your self online

All the tutorials on this site are free, the page code is provifed for you to use it to practice, if you want to help to improve and maintain this work, you can donate to us on.



Html tutorial guide and web design in easy steps


Beginners guide to html

Html tag

bdo

css

anchor

textformat

image

code

paragraph

nobr

q

ol

insdel

meta

ul

form

divspan

table

blockquote

address

dl

fieldset

ascii

checkbox

abbracro

ssi

object

All the tutorials on this site are provided for free. You can copy and print the tutorials and code on this site, but you are not allowed to reproduce this information on another website. All rights reserverd 2012
 

Css Generator    Htaccess Generator    Percentage Calculator   Area conversion

Htaccess    html   Php    javascript   Asp   css    maths  Past Questions  Practice Tests Online