HTMLx

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
===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====
<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
|  
| 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>
====Appearance====
An example table
First header	Second header	Second header
upper left 	  	
right side
lower left 	lower middle 	
right side
{| border="0"	
{| border="0"	
{| border="0"
 	 	
Two PeaceWiki logos	
Two PeaceWiki logos