Basic Columns & Block Codes for Html Pages
A Warm Welcome


 
This site is - 321 Days Old
A Warm Welcome to Zan's Zone Guest
Please feel free to come and go as you please.
Please tell me if you see any mistakes in the skin so that I can fix it.
Feel free to add a link to your own board, blog or website in your signature.
The size of images added to signatures are restricted to avoid long scrolling passed them.
If you have made a post on your own board and you would like to post a link to it, Post it Here
This Week’s Video
Whatcha Up To?

My Time & Weather

Click for Bournemouth, United Kingdom Forecast

Worthwhile Charities

Share | 
 

 Basic Columns & Block Codes for Html Pages

View previous topic View next topic Go down 
AuthorMessage
Zandranna
Owner
Owner
avatar

Name : Sandy
Location : Dorset
UK
Posts : 1232
Kudos : 103
Mood : Bunged up with a cold
Birthday : 1st Nov
Scorpio

PostSubject: Basic Columns & Block Codes for Html Pages   23/05/17, 10:31 am

If you pick up the codes below and add them to the right hand box on that html online editor it will give you clean columns to work from to build your webpage on there.

Once you have built the basic page you can transfer it to an html page and then use the editor in view mode to change the size or colour of the text etc.


A Header Code with Image
Code:
<table style="width: 100%;" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td><img title="Map" src="https://imgfast.net/users/3716/78/29/67/album/wsmap10.png" alt="Map" border="0" /></td>
<td style="width: 100%;"><span style="font-size: 32px;"><strong>Title</strong></span></td>
</tr>
</tbody>
</table>


One Column
Code:
<table style="width: 100%;" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td class="column" style="width: 100%;" valign="top">
Column One
 </td>
  </tr>
</tbody>
</table>

Two Columns
Code:
<table style="width: 100%;" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td class="column" style="width: 50%;" valign="top">
Column One
 </td>
  <td class="column" style="width: 50%;" valign="top">
Column Two
 </td>
  </tr>
</tbody>
</table>

Three Columns
Code:
<table style="width: 100%;" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td class="column" style="width: 33%;" valign="top">
Column One
 </td>
  <td class="column" style="width: 34%;" valign="top">
Column Two
 </td>
    <td class="column" style="width: 33%;" valign="top">
Column Three
 </td>
 </tr>
</tbody>
</table>

Four Columns
Code:
<table style="width: 100%;" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td class="column" style="width: 25%;" valign="top">
Column One
 </td>
  <td class="column" style="width: 25%;" valign="top">
Column Two
 </td>
    <td class="column" style="width: 25%;" valign="top">
Column Three
 </td>
      <td class="column" style="width: 25%;" valign="top">
Column Four
 </td>
 </tr>
</tbody>
</table>

You can add these tables one under each other to build your page.
Back to top Go down
View user profile http://www.zandranna.com/u1wall https://twitter.com/zandranna Online
 
Basic Columns & Block Codes for Html Pages
View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Zan's Zone :: How Can I Help? :: Help for Board Owners :: How to Turn a Message Board into a 3 in 1 Website-
Jump to: