Tables and Boxes
« What does it mean »

Welcome Guest. Please Login or Register.
Nov 22, 2009, 8:54am

[Home] [Help] [Search] [Login] [Register]


Main Linkpage Music Demo Tables Safetynet



Tables and Boxes :: HTML Tables :: Customising your table :: What does it mean
   [Search This Thread][Send Topic To Friend] [Print]
AuthorTopic: What does it mean (Read 959 times)
All Seeing Eyes
Administrator
*****
member is offline




[homepage]

Joined: Jul 2004
Posts: 54
What does it mean
« Thread Started on Dec 19, 2006, 2:59pm »
Looking at a table code, you might be confused with all the jargon, i'll try to explain in simple terms.

Taking this table for example (simple tables > legend table)

Code:
<table cellpadding="4" cellspacing="1" border="1" width="300" height="100" align="center">
<tr>
<td width="100%" class="titlebg" align="center" colspan="2">
<font size=2 class="titletext" color="FFFFFF"><b>LEGEND TITLE</b></font></td>
</tr>
<tr>
<td width="50%" class="windowbg">
CONTENT OF LEFT CELL
</td>

<td width="50%" class="windowbg">
CONTENT OF RIGHT CELL
</td>
</tr>
</table>
</td>
</tr>
</table>


Cellpadding: the amount of space in pixels around the content of the cell

Cellspacing: spacing between cells

Border: the border around table or cell, for an invisible border, set this to "0", you can go up to "7" for a 3D effect.

Width and height: are self explanitory, but can be in whole numbers or percent.
when setting the width of multiple cells, they should add up to no more than the table width.

Align: setting the position of the content, if you don't align, it will be top left as default.
valid aligns: top, middle, bottom, left, center, right
you can align vertically and horizontally with 2 aligns.

Class: when used on your board, it will match the part you define.
class="titlebg" will match the titlebar cell for example, or you can add your own CSS

<style type="text/css">
<!--
.cell1 { background-color: 4080B0; font-style: normal; font-weight: bold; font-size: 12px; color: F1F1F1; }
.cell2 { background-color: 4080B0; font-style: normal; font-weight: bold; font-size: 12px; color: F1F1F1; }
.cell3 { background-color: 4080B0; font-style: normal; font-weight: bold; font-size: 12px; color: F1F1F1; }
-->
</style>
i know all lines above are the same, but altering each line means you can customise the bg, font etc for each cell

adding class="cell1" in a cell line will make that cell the same as all other cell1's

i may go into explaining css and tables later.

Colspan: this is the column span, like in the example table, you have a title cell which spans across 2 cells, so the colspan is set to 2, a 3 column info table like on most sites has a colspan of 3.


TEST TIME: now it's your turn, either on a test board, or create a category and board on your site that only you can access.

now drop the above table into the header of that board, you can drop the CSS there too.

play with the settings, see what they do, add some content to the cells.

ifyou have added the CSS, change the class in the table to class="cell1" and class="cell2".
now change the settings/colors/font in the css lines, see how it affects the table.
--------------------------------------------
hint, open 2 windows, one for viewing each change by refreshing, the other to edit the code, you can hit 'back' to make another change and save it.
« Last Edit: Dec 19, 2006, 3:04pm by All Seeing Eyes »Link to Post - Back to Top  IP: Logged
   [Search This Thread][Send Topic To Friend] [Print]



Click Here To Make This Board Ad-Free


This Board Hosted For FREE By ProBoards
Get Your Own Free Message Boards & Free Forums!