Tables

symon · Posted: Sat Mar 25, 2006 2:12 am Post subject: Tables

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 ( ) 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> </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.

symon · Posted: Sat Mar 25, 2006 2:18 am Post subject:

Example 1

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

Example 2

Table with borders

Row 1, cell 1

Row 1, cell 2

Example 3

Headings in a Table

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Example 4 a

Empty Cells in a Table

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

Example 4 b

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

Example 5

Table with a Caption

My Caption
100	200	300
400	500	600

Example 6

Cell that spans two columns:

Name	Telephone
Bill Gates	555 77 854	555 77 855

Cell that spans two rows:

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

Example 7

Tags inside a table

This is a paragraph

This is another paragraph

This cell contains a table:

A	B
C	D

This cell contains a list

apples
bananas
pineapples

HELLO

Example 8

Without cellpadding:

First	Row
Second	Row

With cellpadding:

First	Row
Second	Row

Example 9

Without cellspacing:

First	Row
Second	Row

With cellspacing:

First	Row
Second	Row

Example 10

A background color:

First	Row
Second	Row

A background image:

First	Row
Second	Row

Example 11

Cell backgrounds:

First	Row
Second	Row

Example 12

Align the content in a table cell

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

	howtodoit.myfreeforum.org Forum Index -> The Most common Question's Answered	All times are GMT
Page 1 of 1