iTech College - Internet Technology, Online Education, E-Learning, Technician Training, Tech Tutorials, Distance Education, Virtual Learning HTML Course: Table - www.itechcollege.com HTML Course: Table - www.itechcollege.com
Free Courses
HTML
JavaScript
CSS
ASP
PHP
JSP
C++
ASP.NET
SQL
AJAX
FTP
XML

courses > HTML > Table

Table

The format of table is:

<TABLE>
<TR> 
<TD> Table Entry </TD>
<TD> Table Entry </TD> 
</TR>
<TR> 
<TD> Table Entry </TD>
<TD> Table Entry </TD> 
</TR>
</TABLE>

The whole table is opened and closed with <TABLE> </TABLE>. Each row is encapsulated in <TR> </TR>. Within the row are cells, enclosed in <TD> </TD>. There can be as many rows and columns as you want and as will fit on the screen. The browser will autoformat the rows, vertically centering cell contents if necessary. If you want a cell to span more than one column, enclose it in <TD COLSPAN=X> </TD>, where X indicate the number of columns to span. Similarly, <TD ROWSPAN=X> </TD> will cause the cell to span X rows. A border can be placed around all the cells by using <TABLE BORDER=X> </TABLE>, where X is the number of pixels thick the border should be. Let's see an example:

   <CENTER><TABLE BORDER=1 WIDTH="62%" HEIGHT=90>
   <TR>
      <TD WIDTH=82><CENTER> Name</CENTER></TD>
      <TD WIDTH=111><CENTER>Phone</CENTER></TD>
      <TD WIDTH=91><CENTER>ID</CENTER></TD>
   </TR>
   <TR>
      <TD WIDTH=82><CENTER>John Lee</CENTER></TD>
      <TD WIDTH=111><CENTER>456-968</CENTER></TD>
      <TD WIDTH=91><CENTER>276580</CENTER></TD>
   </TR>
   <TR>
      <TD WIDTH=82><CENTER>Cherry Heitz</CENTER></TD>
      <TD WIDTH=111><CENTER>789-326</CENTER></TD>
      <TD WIDTH=91> <CENTER>908743</CENTER></TD>
   </TR>
   </TABLE></CENTER>

Name

Phone

ID

John Lee

456-968

276580

Cherry Heitz

789-326

908743

The value of width and height can be "xx%" or XX. For example: WIDTH="80%" or WIDTH=450. "xx%" allow the table size changing while the window size is changing. The value of Border can be zero. In this case, the table will have no border. You can make a table looking like this:

The following is the code of this table.

     <TABLE BORDER=10 CELLSPACING=10 CELLPADDING=2>
     <TR><TD></TD><TD></TD></TR>
     <TR><TD></TD><TD></TD></TR>
     </TABLE>

The CELLSPACING attribute refers to the space between cells and should be in pixels. The CELLPADDING attribute refers to the spacing within the cell in pixels (the space between the cell walls and the contents of the cell).

Element

Description

<TABLE>
</TABLE>
defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border.
<CAPTION>
</CAPTION>
defines the caption for the title of the table. The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption.
<TR> </TR>
specifies a table row within a table. You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information.
<TH> </TH>
defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.
<TD> </TD>
defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

Attribute Description
ALIGN (LEFT, CENTER, RIGHT) Horizontal alignment of a cell.
VALIGN (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell.
COLSPAN=n The number (n) of columns a cell spans.
ROWSPAN=n The number (n) of rows a cell spans.
NOWRAP Turn off word wrapping within a cell.


  Back to Index Page
 Next Page:  

Basic Tags
Character Paragraph and Position
Character Style
Lists
Links
Image
Color
Table
Form
Frame


Online Education, Online Training for Your Job, Distance Education, E-learning Programs for Your Career!Online Colleges, Online Universities, E-learning & Distance Education for Your Career! Easy Job Training & Online Courses.


   Email A Friend  
 
Earn Online Degree
for Your Job
I found a job after I earned an online degree!
Online classes for finding a Job. Online College, Online University, Degrees, E-learning school, online certificate Earn your
online degree now!
Online Training
for Good Job
Why I work so hard but earn so little? Why I cannot find a high paying job?
Online training for a Good Jobs. Online Degree, E-learning school, online certificate Go to
online school now!

Copyright ©2024, itechcollege.com. All rights reserved
iTechCollege | About iTech | Contact iTech