Wikia

Peace Elements

HTMLx

Talk0
185pages on
this wiki
HTMLx HTMLx2 HTMLx3 HTMLx4 CSSx1 Image Garden Photo Sandbox

HTMLxEdit

0==1


tablesEdit

padding and spacingEdit

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
VcooAdded by Vcoo
===tag inside table===




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

<p>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 tableEdit

cells spanning >1 row/columnEdit

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




captionEdit

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 & colorEdit

A background color:


First Row
Second Row


A background image:


First Row
Second Row




background/image in cellEdit

Cell backgrounds:


First Row
Second Row




align content in cellEdit

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 codeEdit

{| 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
|}
|}


AppearanceEdit

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

Advertisement | Your ad here

Around Wikia's network

Random Wiki