how to use html and tables

[Thomas]

Hi can someone tell me how to use html and tables here at the forum?
I'm working on an update log and to keep it organized I would like to use tables.
I already tried it but not all html codes are correctly recognized by the forum software and the whole thing looked totally screwed.

[Jerry]

There are settings which allow or disallow certain HTML and/or BBCode depending on how they are set up. In our robotics forum we run PHPBB and have recently set it up to allow BBCode tables.

This could also be done here if the moderators set it up. If not... then all you can do is make your own HTML page on your server and link to it.

Jerry

[B3F11dolly]

to add a table to a post, you need a simple hotmail programming
replace ( by < and ) by > and it will work

(table border=1)
(tr)(td)....text here....(/td)(/tr)
(/table)

a hotmail table starts with (table) and ends with (/table), every table row = tr starts with (tr) and ends with (/tr) and every cell of a row ( table data = td ) starts with (td) and ends (/td)

to add more table rows, add more (tr)(td)......(/td)(/tr)

to add more cells, add more (td).......(/td) in between of (tr)....(/tr)

if you want invisible table borders : border=0

[Zeus]

Whole concept of html is that it is a formatting language. The browser would read a start and end tag in order to determine how to format the text that is encapsulated by it.

So if you want just one table, you will have a pair of tags.

Code: Select all

<table></table>

Now all you have is just a table without any rows or cell. To have rows, put these tags inside of the table tags.

Code: Select all

<table><tr></tr></table>

So now your table has one row. If you want multiple rows, just add more tr tags. e.g.

Code: Select all

<table>
  <tr></tr>
  <tr></tr>
</table>

Now your table has 2 rows. However rows aren't exactly good for putting information in, this is where we would use a cell. So to add cells to a table's row, you do this:

Code: Select all

<table>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Essentially the table tags is to differentiate the number of tables, the tr is to tell how many rows (tr = table row) and td is to tell how many cells (tr = table data).

So just a quick sniplet:

Code: Select all

<table border=1>
  <tr>
    <td>Replace this text</td>
    <td>Row 1 cell 2</td>
  </tr>
  <td>
    <td>Row 2 cell 1</td>
    <td>Row 2 cell 2</td>
    <td>Row 2 cell 3</td>
  </td>
</table>

nb: border=1 is use to highlight the table composition. HTH.

[Inkling]

When I was fairly new to TDForum, I tried a table and failed miserably. Ishtaria cleaned it up.

I think when putting a table on a web page one would normally press the Enter key on the keyboard periodically. The problem I had was TDForum Reads every single Enter keystroke and throws in a separate line. Wreaks havoc with tables, it does. Was that the problem??

[Thomas]

Zeus:
Welcome and thanks for your help.
This is what I get with you last example with one fix and a few additions:
<table width="100%" border=1>
<tr>
<td colSpan=3>Title</td> </tr>
<tr>
<td width=150>Replace this text</td>
<td colSpan=2>Row 1 cell 2</td> </tr>
<tr>
<td>Row 2 cell 1</td>
<td>Row 2 cell 2</td>
<td>Row 2 cell 3</td> </tr>
</table>

Code: Select all

<table width="100%" border=1> 
  <tr> 
    <td colSpan=3>[size=18]Title[/size]</td> </tr> 
  <tr> 
    <td width=150>[size=14]Replace this text[/size]</td> 
    <td  colSpan=2>Row 1 cell 2</td> </tr> 
  <tr> 
    <td>Row 2 cell 1</td> 
    <td>Row 2 cell 2</td> 
    <td>Row 2 cell 3</td> </tr> 
</table>

I already found, that the large empty space above the table is caused by all the "enter" key strokes inside the code. Is there any way to supress this?
The code without structure is not really a good idea.

[B3F11dolly]

That example has a simple mistake : The first row has 1 table data, the second 2, the third row has 3 cells. That doesn't work. But cool, didn't know that [ code ] [ /code ] trick to make it visible. So here we go

a simple table, let's say a simple Realdoll matrix, 4 columns, 4 rows, so let's say 3 bodies, 3 faces - and the number of dolls - LOL

<TABLE BORDER=1 WIDTH=200>
<TR><TD>**</TD><TD>B 1</TD><TD>B 2</TD><TD>B3</TD></TR>
<TR><TD>F 1</TD><TD>3</TD><TD>6</TD><TD>7</TD></TR>
<TR><TD>F 2</TD><TD>6</TD><TD>2</TD><TD>1</TD></TR>
<TR><TD>F 3</TD><TD>4</TD><TD>8</TD><TD>6</TD></TR>
</TABLE>

Code: Select all

<TABLE BORDER=1>
<TR><TD>**</TD><TD>B 1</TD><TD>B 2</TD><TD>B 3</TD></TR>
<TR><TD>F 1</TD><TD>3</TD><TD>6</TD><TD>7</TD></TR>
<TR><TD>F 2</TD><TD>6</TD><TD>2</TD><TD>1</TD></TR>
<TR><TD>F 3</TD><TD>4</TD><TD>8</TD><TD>6</TD></TR>
</TABLE>

here you have 4 rows with 4 cells each
for further rows or cells add further td and tr




if you need a cell with more further cells inside, like Zeus tried,
you need to put a further table into a cell of the other table
for example, think of the frameset of my website :
left : menu
top right : banner
bottom right : text
as a table, this would be

<TABLE BORDER=1 WIDTH=220>
<TR>
<TD><CENTER>menu</TD>
<TD><CENTER>
<TABLE BORDER=1 BORDERCOLOR="red">
<TR><TD><CENTER>banner</TD></TR>
<TR><TD>hey, it's me<BR>crazy Vanessa dolly</TD></TR>
</TABLE>
</TD></TR>
</TABLE>

Code: Select all

<TABLE BORDER=1 WIDTH=220>
<TR><CENTER>
<TD>menu</TD>
<TD><CENTER>
  <TABLE BORDER=1 BORDERCOLOR="red">
  <TR><TD><CENTER>banner</TD></TR>
  <TR><TD>hey, it's me<BR>crazy Vanessa dolly</TD></TR>
  </TABLE>
</TD></TR>
</TABLE>

but I'm afraid this is already too complicated for this message program
( doesn't look nice, but that's mistakes done by the message program )

those empty spaces created by the enter key strokes are another mistake done by the message program used for the posts, to avoid that, programm the whole table in just 1 line and it's gone :

<TABLE BORDER=1 WIDTH=220><TR><TD><CENTER>menu</TD><TD><CENTER><TABLE BORDER=1 BORDERCOLOR="red"><TR><TD><CENTER>banner</TD></TR><TR><TD>hey, it's me<BR>crazy Vanessa dolly</TD></TR></TABLE></TD></TR></TABLE>

but now the programming looks weird :

Code: Select all

<TABLE BORDER=1 WIDTH=220><TR><TD><CENTER>menu</TD><TD><CENTER><TABLE BORDER=1 BORDERCOLOR="red"><TR><TD><CENTER>banner</TD></TR><TR><TD>hey, it's me<BR>crazy Vanessa dolly</TD></TR></TABLE></TD></TR></TABLE>

as you see, for humans it's easier to understand if you put a little optical structure into it, for this message board, this is confusing and it prefers the weird non-stop code version -> program the table with structure so that you see what you do, and then use the backshift key to make it be 1 row of code text...

--> -->

[Bill]

Wow! That is cool stuff.
I learn something here everyday and the idea of using old condoms as balloons caused much excitement at the church picnic. I never run so fast....good exercise for the heart though.

[Thomas]

That example has a simple mistake : The first row has 1 table data, the second 2, the third row has 3 cells. That doesn't work.

That wasn't a mistake - it was intended. And it worked like intended.

That the forum software doesn't allow structured programing and is piling up the "new line" comands in front of the table must be a bug in the software.

[Zeus]

Zeus:
Welcome and thanks for your help.
This is what I get with you last example with one fix and a few additions:
<table width="100%" border=1>
<tr>
<td colSpan=3>Title</td> </tr>
<tr>
<td width=150>Replace this text</td>
<td colSpan=2>Row 1 cell 2</td> </tr>
<tr>
<td>Row 2 cell 1</td>
<td>Row 2 cell 2</td>
<td>Row 2 cell 3</td> </tr>
</table>

Code: Select all

<table width="100%" border=1> 
  <tr> 
    <td colSpan=3>[size=18]Title[/size]</td> </tr> 
  <tr> 
    <td width=150>[size=14]Replace this text[/size]</td> 
    <td  colSpan=2>Row 1 cell 2</td> </tr> 
  <tr> 
    <td>Row 2 cell 1</td> 
    <td>Row 2 cell 2</td> 
    <td>Row 2 cell 3</td> </tr> 
</table>

I already found, that the large empty space above the table is caused by all the "enter" key strokes inside the code. Is there any way to supress this?
The code without structure is not really a good idea.

Good point, I didn't introduce the concept of colSpan because I felt learning the whole concept of tables, tr's and td's would be quite a bit, and add an array of combination it might be a bit overly complex.

You can always add additional information/parameters in the tags to give you more flexibility in your table structure.

Also when using a formatting language like html, be sure it conforms to xhtml and that it works on a wide range of browsers.

[Thomas]

Here are some samples of the tables I made here:

http://www.dollforum.com/modules.php?na ... e36#120062

http://www.dollforum.com/modules.php?na ... a29#112243