Fandom

Peace Elements

HTMLx

189pages on
this wiki
Add New Page
Talk0 Share

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

HTMLx HTMLx2 HTMLx3 HTMLx4 CSSx1 Image Garden Photo Sandbox

HTMLxEdit

jnnb 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
===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

Also on Fandom

Random Wiki