Peace Elements
Don't have an account?
Register
Register

Changes: HTMLx

Back to page
Edit
mNo edit summary
Tag: Visual edit
 
(16 intermediate revisions by 4 users not shown)
Line 1: Line 1:
  +
<table border="1" width="100%">
−
HTML experiment page
  
  +
<tr>
  +
<td align="center" bgcolor="#888888">[[HTMLx]]
  +
</td>
  +
<td align="center" bgcolor="#999999">[[HTMLx2]]
  +
</td>
  +
<td align="center" bgcolor="#aaaaaa">[[HTMLx3]]
  +
</td>
  +
<td align="center" bgcolor="#bbbbbb">[[HTMLx4]]
  +
</td>
  +
<td align="center" bgcolor="#cccccc">[[CSSx1]]
  +
</td>
  +
<td align="center" bgcolor="#dddddd">[[Image Garden]]
  +
</td>
  +
<td align="center" bgcolor="#eeeeee">[[Photo Sandbox]]
  +
</td>
  +
</tr>
  +
</table>
   
  +
==HTMLx==
−
[[HTMLx2]]
  
  +
  +
jnnb
  +
0=<font size="5">&infin;</font>=1
   
−
0=<font size=5>&infin;</font>=1
  
   
−
==tables==
 
   
  +
==tables==
−
<h4>One column:</h4>
  
  +
−
<table border="1">
  
−
<tr>
  
−
<td>100</td>
  
−
</tr>
  
−
</table>
  
   
  +
===padding and spacing===
−
<h4>One row and three columns:</h4>
  
−
<table border="1">
  
−
<tr>
  
−
<td>100</td>
  
−
<td>200</td>
  
−
<td>300</td>
  
−
</tr>
  
−
</table>
  
   
−
<h4>Two rows and three columns:</h4>
  
−
<table border="1">
  
−
<tr>
  
−
<td>100</td>
  
−
<td>200</td>
  
−
<td>300</td>
  
−
</tr>
  
−
<tr>
  
−
<td>400</td>
  
−
<td>500</td>
  
−
<td>600</td>
  
−
</tr>
  
−
</table>
  
   
−
<p>
  
−
Each table starts with a table tag.
 
−
Each table row starts with a tr tag.
  
−
Each table data starts with a td tag.
  
−
</p>
  
   
  +
<h4>Without cellpadding:</h4>
   
−
==table borders==
  
   
−
 
−  
−
<h4>Normal border:</h4>
 
 
<table border="1">
  
<table border="1">
−
<tr>
  
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
  +
<tr>
−
<h4>Thick border:</h4>
 
  +
<td>First</td>
−
<table border="8">
  
−
<tr>
 +
<td>Row</td>
  +
</tr>
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
  +
<tr>
−
<h4>Very thick border:</h4>
 
  +
<td>Second</td>
−
<table border="15">
  
−
<tr>
 +
<td>Row</td>
  +
</tr>
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
 
</table>
  
</table>
   
−
==no borders==
  
   
−
<h4>No borders:</h4>
 +
<h4>With cellpadding:</h4>
−
<table>
  
−
<tr>
  
−
<td>100</td>
  
−
<td>200</td>
  
−
</tr>
  
−
<tr>
  
−
<td>300</td>
  
−
<td>400</td>
  
−
</tr>
  
−
</table>
  
   
−
<h4>And this table has no borders:</h4>
  
−
<table border="0">
  
−
<tr>
  
−
<td>100</td>
  
−
<td>200</td>
  
−
</tr>
  
−
<tr>
  
−
<td>300</td>
  
−
<td>400</td>
  
−
</tr>
  
−
</table>
  
   
  +
<table border="1" cellpadding="10">
−
==headings==
  
   
  +
<tr>
−
<h4>Table headers:</h4>
  
  +
<td>First</td>
−
<table border="1">
  
−
<tr>
 +
<td>Row</td>
  +
</tr>
−
<th>Name</th>
  
−
<th>Telephone</th>
  
−
<th>Telephone</th>
  
−
</tr>
  
−
<tr>
  
−
<td>Bill Gates</td>
  
−
<td>555 77 854</td>
  
−
<td>555 77 855</td>
  
−
</tr>
  
−
</table>
  
   
−
<h4>Vertical headers:</h4>
  
−
<table border="1">
  
−
<tr>
  
−
<th>First Name:</th>
  
−
<td>Bill Gates</td>
  
−
</tr>
  
−
<tr>
  
−
<th>Telephone:</th>
  
−
<td>555 77 854</td>
  
−
</tr>
  
−
<tr>
  
−
<th>Telephone:</th>
  
−
<td>555 77 855</td>
  
−
</tr>
  
−
</table>
  
−  
−
==empty cells==
  
−  
−
<table border="1">
  
 
<tr>
  
<tr>
−
<td>Some text</td>
 +
<td>Second</td>
−
<td>Some text</td>
 +
<td>Row</td>
−
</tr>
  
−
<tr>
  
−
<td></td>
  
−
<td>Some text</td>
  
 
</tr>
  
</tr>
 
</table>
  
</table>
   
−
<p>
  
−
As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.
  
−
</p>
  
   
  +
−
<p>
  
−
The trick is to insert a no-breaking space in the cell.
  
−
</p>
  
   
−
<p>
  
−
No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.
  
−
</p>
  
   
  +
***
−
<p>
  
−
The no-breaking space entity starts with an ampersand ("&"),
  
−
then the letters "nbsp", and ends with a semicolon (";")
  
−
</p>
  
   
−
==caption==
  
   
  +
−
<h4>This table has a caption:</h4>
  
  +
−
<table border="1">
  
  +
−
<caption>My Caption</caption>
  
  +
<h4>Without cellspacing:</h4>
−
<tr>
  
−
<td>100</td>
  
−
<td>200</td>
  
−
<td>300</td>
  
−
</tr>
  
−
<tr>
  
−
<td>400</td>
  
−
<td>500</td>
  
−
<td>600</td>
  
−
</tr>
  
−
</table>
  
   
−
--span more than one row/column==
  
   
−
<h4>Cell that spans two columns:</h4>
  
 
<table border="1">
  
<table border="1">
  +
 
<tr>
  
<tr>
−
<th>Name</th>
 +
<td>First</td>
−
<th colspan="2">Telephone</th>
 +
<td>Row</td>
−
</tr>
 +
</tr>
  +
 
<tr>
  
<tr>
−
<td>Bill Gates</td>
 +
<td>Second</td>
−
<td>555 77 854</td>
 +
<td>Row</td>
−
<td>555 77 855</td>
  
 
</tr>
  
</tr>
 
</table>
  
</table>
   
  +
−
<h4>Cell that spans two rows:</h4>
  
  +
<h4>With cellspacing:</h4>
−
<table border="1">
  
  +
  +
  +
<table border="1" cellspacing="10">
  +
 
<tr>
  
<tr>
−
<th>First Name:</th>
 +
<td>First</td>
−
<td>Bill Gates</td>
 +
<td>Row</td>
−
</tr>
 +
</tr>
  +
 
<tr>
  
<tr>
−
<th rowspan="2">Telephone:</th>
 +
<td>Second</td>
−
<td>555 77 854</td>
 +
<td>Row</td>
−
</tr>
  
−
<tr>
  
−
<td>555 77 855</td>
  
 
</tr>
  
</tr>
 
</table>
  
</table>
   
   
  +
−
==tags inside of tables==
  
  +
[[Image:Buddhakai2.jpg|thumb]]===tag inside table===
  +
  +
 
 
  +
   
 
<table border="1">
  
<table border="1">
  +
 
<tr>
  
<tr>
 
<td>
  
<td>
  +
<IMG SRC="picture\sharls\SHARLS.JPG" height=100 width=125 border=5 HSPACE="50">
−
<p>This is a paragraph</p>
  
−
<p>This is another paragraph</p>
 +
<p style="padding:-50px;border:1px"> <p>This is another paragraph</p>
  +
 
</td>
  
</td>
 
<td>This cell contains a table:
  
<td>This cell contains a table:
  +
−
<table border="1">
  
  +
<table border="1">
 
<tr>
  
<tr>
 
<td>A</td>
  
<td>A</td>
Line 242: Line 138:
 
</td>
  
</td>
 
</tr>
  
</tr>
  +
 
<tr>
  
<tr>
 
<td>This cell contains a list
  
<td>This cell contains a list
−
<ul>
 +
  +
<ul>
 
<li>apples</li>
  
<li>apples</li>
 
<li>bananas</li>
  
<li>bananas</li>
Line 253: Line 151:
 
</tr>
  
</tr>
 
</table>
  
</table>
  +
  +
  +
===headings in a table===
  +
   
 
 
   
  +
−
===cell padding==
  
  +
===cells spanning >1 row/column===
  +
   
 
 
   
  +
−
<h4>Without cellpadding:</h4>
  
  +
<h4>Cell that spans two columns:</h4>
  +
  +
 
<table border="1">
  
<table border="1">
  +
 
<tr>
  
<tr>
−
<td>First</td>
 +
<th>Name</th>
−
<td>Row</td>
 +
<th colspan="2">Telephone</th>
−
</tr>
+
</tr>
  +
 
<tr>
  
<tr>
−
<td>Second</td>
 +
<td>Bill Gates</td>
−
<td>Row</td>
 +
<td>555 77 854</td>
  +
<td>555 77 855</td>
 
</tr>
  
</tr>
 
</table>
  
</table>
   
  +
−
<h4>With cellpadding:</h4>
  
  +
<h4>Cell that spans two rows:</h4>
−
<table border="1"
 
  +
−
cellpadding="10">
  
  +
  +
<table border="1">
  +
 
<tr>
  
<tr>
−
<td>First</td>
 +
<th>First Name:</th>
−
<td>Row</td>
 +
<td>Bill Gates</td>
−
</tr>
+
</tr>
  +
 
<tr>
  
<tr>
−
<td>Second</td>
 +
<th rowspan="2">Telephone:</th>
−
<td>Row</td>
 +
<td>555 77 854</td>
  +
</tr>
  +
  +
<tr>
  +
<td>555 77 855</td>
 
</tr>
  
</tr>
 
</table>
  
</table>
  +
   
 
 
   
−
==cell spacing==
  
   
  +
===caption===
−
 
  +
  +
  +
  +
  +
  +
<h4>
  +
This table has a caption,
  +
and a thick border:
  +
</h4>
  +
  +
  +
<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>
  +
  +
  +
  +
  +
  +
<h4>Table headers:</h4>
  +
   
−
<h4>Without cellspacing:</h4>
  
 
<table border="1">
  
<table border="1">
  +
 
<tr>
  
<tr>
−
<td>First</td>
 +
<th>Name</th>
−
<td>Row</td>
 +
<th>Telephone</th>
  +
<th>Telephone</th>
−
</tr>
 
  +
</tr>
  +
 
<tr>
  
<tr>
−
<td>Second</td>
 +
<td>Bill Gates</td>
−
<td>Row</td>
 +
<td>555 77 854</td>
  +
<td>555 77 855</td>
 
</tr>
  
</tr>
 
</table>
  
</table>
   
  +
−
<h4>With cellspacing:</h4>
  
  +
<h4>Vertical headers:</h4>
−
<table border="1"
 
  +
−
cellspacing="10">
  
  +
  +
<table border="1">
  +
 
<tr>
  
<tr>
−
<td>First</td>
 +
<th>First Name:</th>
−
<td>Row</td>
 +
<td>Bill Gates</td>
−
</tr>
+
</tr>
  +
 
<tr>
  
<tr>
−
<td>Second</td>
 +
<th>Telephone:</th>
−
<td>Row</td>
 +
<td>555 77 854</td>
  +
</tr>
  +
  +
<tr>
  +
<th>Telephone:</th>
  +
<td>555 77 855</td>
 
</tr>
  
</tr>
 
</table>
  
</table>
   
−
 
   
 
 
−
==background color and image==
  
   
  +
−
 
  +
  +
  +
===background & color===
  +
  +
  +
  +
   
 
<h4>A background color:</h4>
  
<h4>A background color:</h4>
  +
−
<table border="1"
 
  +
−
bgcolor="red">
  
  +
<table bgcolor="red" border="1">
  +
 
<tr>
  
<tr>
 
<td>First</td>
  
<td>First</td>
 
<td>Row</td>
  
<td>Row</td>
 
</tr>
 
</tr>
  +
 
<tr>
  
<tr>
 
<td>Second</td>
  
<td>Second</td>
Line 335: Line 307:
 
</tr>
  
</tr>
 
</table>
  
</table>
  +
   
 
<h4>A background image:</h4>
  
<h4>A background image:</h4>
  +
−
<table border="1"
 
  +
−
background="bgdesert.jpg">
  
  +
<table border="1" background="bgdesert.jpg">
  +
 
<tr>
  
<tr>
 
<td>First</td>
  
<td>First</td>
 
<td>Row</td>
  
<td>Row</td>
 
</tr>
 
</tr>
  +
 
<tr>
  
<tr>
 
<td>Second</td>
  
<td>Second</td>
Line 348: Line 324:
 
</tr>
  
</tr>
 
</table>
  
</table>
  +
  +
 
 
−
 
−
==cell color/bckground==
  
   
  +
−
<h4>Cell backgrounds:</h4>
 
  +
===background/image in cell===
  +
  +
  +
  +
  +
  +
<h4>Cell backgrounds:</h4>
  +
  +
 
<table border="1">
  
<table border="1">
  +
 
<tr>
  
<tr>
 
<td bgcolor="red">First</td>
  
<td bgcolor="red">First</td>
 
<td>Row</td>
  
<td>Row</td>
 
</tr>
 
</tr>
  +
 
<tr>
  
<tr>
  +
<td background="bgdesert.jpg">
−
<td
 
−
background="JB1.jpg">
  
 
Second</td>
  
Second</td>
 
<td>Row</td>
  
<td>Row</td>
 
</tr>
  
</tr>
 
</table>
  
</table>
  +
  +
 
 
−
==align content==
  
   
  +
−
<table width="400" border="1">
  
  +
===align content in cell===
  +
  +
  +
<table border="1" width="400">
 
<tr>
  
<tr>
 
<th align="left">Money spent on....</th>
  
<th align="left">Money spent on....</th>
Line 396: Line 387:
 
</table>
  
</table>
   
−
==frames==
  
   
  +
   
−
<p>
  
−
If you see no frames around the tables in these examples, your browser is too old, or does not support it.
  
−
</p>
  
   
  +
<h2>HTML Layout - Using Tables</h2>
−
<h4>With frame="border":</h4>
  
−
<table frame="border">
  
−
<tr>
  
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
−
<h4>With frame="box":</h4>
  
−
<table frame="box">
  
−
<tr>
  
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
  +
<table border="0" cellpadding="7" width="80%">
−
<h4>With frame="void":</h4>
  
  +
<tr>
−
<table frame="void">
  
  +
<td valign="top" width="40%">One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.
−
<tr>
  
  +
−
<td>First</td>
  
  +
A part of this page is formatted with two columns, like a newspaper
−
<td>Row</td>
  
  +
page.
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
  +
−
<h4>With frame="above":</h4>
  
  +
As you can see at this page, there is a left column and a right column.
−
<table frame="above">
  
−
<tr>
  
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
  +
</td>
−
<h4>With frame="below":</h4>
  
  +
<td bgcolor="#ffffff" valign="top" width="40%">An HTML &lt;table&gt; is used to divide a part of this Web page into two columns.
−
<table frame="below">
  
  +
This text is displayed in the right column.
−
<tr>
  
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
  +
The trick is to use a table without borders, and maybe a little extra
−
<h4>With frame="hsides":</h4>
  
  +
cell-padding.
−
<table frame="hsides">
  
−
<tr>
  
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
  +
No matter how much text you add to this page, it will stay inside its
−
<h4>With frame="vsides":</h4>
  
  +
column borders.
−
<table frame="vsides">
  
−
<tr>
  
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
  +
</td>
−
<h4>With frame="lhs":</h4>
  
  +
</tr>
−
<table frame="lhs">
  
−
<tr>
 +
</table>
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
−
<h4>With frame="rhs":</h4>
  
−
<table frame="rhs">
  
−
<tr>
  
−
<td>First</td>
  
−
<td>Row</td>
  
−
</tr>
 
−
<tr>
  
−
<td>Second</td>
  
−
<td>Row</td>
  
−
</tr>
  
−
</table>
  
   
−
==columns in a table==
  
   
−
This example shows a colgroup that has three columns of different widths:
  
   
  +
−
<table border="1">
  
  +
<h2>Same Layout - Color Added</h2>
−
<colgroup span="3">
  
  +
−
<col width="20"></col>
  
  +
−
<col width="50"></col>
  
−
<col width="80"></col>
 +
<table border="0" cellpadding="7" width="80%">
  +
<tr>
−
</colgroup>
  
  +
<td bgcolor="#efdddd" valign="top" width="40%">One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.
−
<tr>
  
  +
−
<td>1</td>
  
  +
A part of this page is formatted with two columns, like a newspaper
−
<td>2</td>
  
  +
page.
−
<td>3</td>
  
  +
−
<td>4</td>
  
  +
−
</tr>
  
  +
As you can see at this page, there is a left column and a right column.
−
</table>
  
  +
  +
</td>
  +
<td bgcolor="#ddddef" valign="top" width="40%">An HTML &lt;table&gt; is used to divide a part of this Web page into two columns.
  +
This text is displayed in the right column.
  +
  +
The trick is to use a table without borders, and maybe a little extra
  +
cell-padding.
  +
  +
No matter how much text you add to this page, it will stay inside its
  +
column borders.
  +
  +
</td>
  +
</tr>
  +
</table>
  +
  +
====Source code====
  +
  +
  +
<blockquote style="background: white; border: 1px solid black; padding: 1em;
  +
  +
overflow: scroll">
  +
<pre><nowiki>
  +
{| border="1" cellpadding="5" cellspacing="0" align="center"
  +
|+'''An example table'''
  +
|-
  +
! style="background:#efefef;" | First header
  +
! colspan="2" style="background:#ffdead;" | Second header
  +
|-
  +
| upper left
  +
| &nbsp;
  +
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
  +
right side
  +
|-
  +
| style="border-bottom:3px solid grey;" | lower left
  +
| style="border-bottom:3px solid grey;" | lower middle
  +
|-
  +
| colspan="3" align="center" |
  +
{| border="0"
  +
|+''A table in a table''
  +
|-
  +
| align="center" width="150px" | [[Image:wiki.png]]
  +
| align="center" width="150px" | [[Image:wiki.png]]
  +
|-
  +
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid
  +
  +
red; border-bottom:2px solid red; border-left:1px solid red;" |
  +
Two PeaceWiki logos
  +
|}
  +
|}
  +
</nowiki></pre>
  +
</blockquote>
  +
  +
  +
====Appearance====
  +
  +
  +
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
  +
{| align="center" border="1" cellpadding="5" cellspacing="0"
  +
|+'''An example table'''
  +
  +
|-
  +
! style="background:#efefef;" | First header
  +
! colspan="2" style="background:#ffdead;" | Second header
  +
  +
|-
  +
| upper left
  +
| &nbsp;
  +
| rowspan="2" style="border-bottom:3px solid grey;" valign="top" |
  +
right side
  +
  +
|-
  +
| style="border-bottom:3px solid grey;" | lower left
  +
| style="border-bottom:3px solid grey;" | lower middle
  +
  +
|-
  +
| colspan="3" align="center" |
  +
  +
{| border="0"
  +
|+''A table in a table''
  +
  +
|-
  +
| align="center" width="150px" | [[Image:wiki.png]]
  +
| align="center" width="150px" | [[Image:wiki.png]]
  +
  +
|-
  +
| colspan="2" style="border-top:1px solid red; border-right:1px solid red; border-bottom:2px solid red; border-left:1px solid red;" align="center" |
  +
Two PeaceWiki logos
  +
|}
  +
|}
  +
  +
</blockquote>

Latest revision as of 07:24, 26 May 2014

HTMLx HTMLx2 HTMLx3 HTMLx4 CSSx1 Image Garden Photo Sandbox

HTMLx[]

jnnb 0=∞=1


tables[]

padding and spacing[]

Without cellpadding:


First Row
Second Row


With cellpadding:


First Row
Second Row





Without cellspacing:


First Row
Second Row


With cellspacing:


First Row
Second Row


Buddhakai2

===tag inside table=== 



  <IMG SRC="picture\sharls\SHARLS.JPG" height=100 width=125 border=5 HSPACE="50">

This is another paragraph

 This cell contains a table:
A B
C D
This cell contains a list
  • apples
  • bananas
  • pineapples
 HELLO


headings in a table[]

cells spanning >1 row/column[]

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
555 77 855



caption[]

This table has a caption, and a thick border:


My Caption
100 200 300
400 500 600



Table headers:


Name Telephone Telephone
Bill Gates 555 77 854 555 77 855


Vertical headers:


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




background & color[]

A background color:


First Row
Second Row


A background image:


First Row
Second Row



background/image in cell[]

Cell backgrounds:


First Row
Second Row



align content in 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



HTML Layout - Using Tables


One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.

A part of this page is formatted with two columns, like a newspaper 

     page.


As you can see at this page, there is a left column and a right column.

An HTML <table> is used to divide a part of this Web page into two columns. 
     This text is displayed in the right column.

     The trick is to use a table without borders, and maybe a little extra
     cell-padding.

     No matter how much text you add to this page, it will stay inside its
     column borders.



Same Layout - Color Added


One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.

A part of this page is formatted with two columns, like a newspaper 

     page.


As you can see at this page, there is a left column and a right column.

An HTML <table> is used to divide a part of this Web page into two columns. 
     This text is displayed in the right column.

     The trick is to use a table without borders, and maybe a little extra
     cell-padding.

     No matter how much text you add to this page, it will stay inside its
     column borders.

Source code[]

{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''An example table'''
|-
! style="background:#efefef;" | First header
! colspan="2" style="background:#ffdead;" | Second header
|-
| upper left
|  
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
right side
|-
| style="border-bottom:3px solid grey;" | lower left
| style="border-bottom:3px solid grey;" | lower middle
|-
| colspan="3" align="center" |
{| border="0"
|+''A table in a table''
|-
| align="center" width="150px" | [[Image:wiki.png]]
| align="center" width="150px" | [[Image:wiki.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid 

red; border-bottom:2px solid red; border-left:1px solid red;" |
Two PeaceWiki logos
|}
|}


Appearance[]

An example table
First header Second header
upper left  

right side

lower left lower middle
A table in a table
Wiki Wiki

Two PeaceWiki logos

Community content is available under CC-BY-SA unless otherwise noted.