Text
Tables

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    howtodoit.myfreeforum.org Forum Index -> The Most common Question's Answered
View previous topic :: View next topic  
Author Message
Please Register and Login to this forum to stop seeing this advertsing.





Add Karma

Posted:     Post subject:

Back to top
symon
Site Admin
Site Admin

Location: 

Joined: 13 Mar 2006
Posts: 866


Location: Hampshire Add Karma

PostPosted: Sat Mar 25, 2006 2:12 am    Post subject: Tables Reply with quote

First off you have to your allow these HTML tags in admin panel --general config-- allow HTML (also make sure html is on in your profile and any member that wishes to see the table)

table,tr,th,td

-------------------------------------------------------------------------------------
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
=----------------------------------------------------------------------------------

TIP

To avoid the table being shown half way down the page make sure that there are no breaks in the code for example:

Insted of this
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Make it like this

<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>

Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Example 1

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

See below to see how they will look

--------------------------------------------------------------------------------

Tables and the Border Attribute
If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

Example 2

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

--------------------------------------------------------------------------------

Headings in a Table
Headings in a table are defined with the <th> tag.

Example 3

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
--------------------------------------------------------------------------------

Empty Cells in a Table
Table cells with no content are not displayed very well in most browsers.

Example 4 a

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:

Example 4 b

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

<html>
<body>

-------------------------------------------------------------------------------------
This table has a caption,and a thick border:

Example 5

<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

--------------------------------------------------------------------------------

Cell that spans two columns:

Example 6

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

Cell that spans two rows:

<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

-------------------------------------------------------------------------------
Tags inside a table

Example 7

<table border="1"><tr><td><p>This is a paragraph</p><p>This is another paragraph</p></td><td>This cell contains a table:<table border="1"><tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

--------------------------------------------------------------------------------

Without cellpadding:

Example 8

<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

With cellpadding:

<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

-------------------------------------------------------------------------------

Without cellspacing:

Example 9

<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

With cellspacing:

<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

--------------------------------------------------------------------------------

A background color:

Example 10

<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

A background image:

<table border="1"
background=http://link to the image>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

-------------------------------------------------------------------------------

Cell backgrounds:

Example 11

<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background=http://link to the image>
Second</td>
<td>Row</td>
</tr>
</table>

-------------------------------------------------------------------------------

Align the content in a table cell

Example 12

<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>


--------------------------------------------------------------------------------
Basic Notes - Useful Tips
The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML.


Last edited by symon on Sat Mar 25, 2006 3:44 am; edited 11 times in total
Back to top
View user's profile Send private message
symon
Site Admin
Site Admin

Location: 

Joined: 13 Mar 2006
Posts: 866


Location: Hampshire Add Karma

PostPosted: Sat Mar 25, 2006 2:18 am    Post subject: Reply with quote

Example 1

row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2


Example 2

Table with borders

Row 1, cell 1Row 1, cell 2


Example 3

Headings in a Table

HeadingAnother Heading
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2


Example 4 a

Empty Cells in a Table

row 1, cell 1row 1, cell 2
row 2, cell 1


Example 4 b

row 1, cell 1row 1, cell 2
row 2, cell 1&nbsp;


Example 5

Table with a Caption

My Caption
100200300
400500600


Example 6

Cell that spans two columns:

NameTelephone
Bill Gates555 77 854555 77 855


Cell that spans two rows:

First Name:Bill Gates
Telephone:555 77 854
555 77 855


Example 7

Tags inside a table

This is a paragraph

This is another paragraph

This cell contains a table:
AB
CD
This cell contains a list
  • apples
  • bananas
  • pineapples
HELLO


Example 8

Without cellpadding:

FirstRow
SecondRow


With cellpadding:

FirstRow
SecondRow


Example 9

Without cellspacing:

FirstRow
SecondRow


With cellspacing:

FirstRow
SecondRow


Example 10

A background color:

FirstRow
SecondRow


A background image:

FirstRow
SecondRow


Example 11

Cell backgrounds:

FirstRow
SecondRow


Example 12

Align the content in a table cell

Money spent on....JanuaryFebruary
Clothes$241.10$50.20
Make-Up$30.00$44.45
Food$730.40$650.00
Sum$1001.50$744.65



Back to top
View user's profile Send private message
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    howtodoit.myfreeforum.org Forum Index -> The Most common Question's Answered All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Card File  Gallery  Forum Archive
HOWTODOIT was designed and built by Symon Field
Creator Of ☆ FarnboroughInvinciblesAgonyAuntFairiesAsylum Alliance FunnyWorldHOWTODOIT PHPbb3
HOWTODOIT© Symon Field 2006,2007,2008

Powered by phpBB Group © 2001,2005.
 

Create your own free forum | Buy a domain to use with your forum