Table column widths

[mikegann]

Disclaimer - Complete lack of HTML or CSS

I am planning on having a 7 column table and would like to set the column widths as percentages of the total table width.

Column1 - 15%, Column2 - 10%, Column3 - 15%, Column4 - 40%, Column5 - 5%, Column6 - 10%, Column7 - 5%

I have looked at the example of tables and CSS on the wiki site but I don't see anything relating to column width. But then again this is the first time with this stuff.

Any guidance is appreciated.

Thanks,
Mike

[Jerry Muelver]

Setting discrete widths for specific columns would require a class for each column, and naming each column for its class. If you only need the table once, you can do it directly in HTML, without hassling with CSS, like this:

html "<table width=400px><tr>
<td width=15%>Col 1</td>
<td width=10%>Col 2</td>
<td width=15%>Col 3</td>
<td>Open Col</td></td>
</tr>
</table>"

I have "Open col" of unspecified width to fill in the rest of the table width. You would have percentages totaling 100%, instead. The CSS solution is verbose, but not difficult.

[mikegann]

Hi Jerry - Thanks for the reply.

I defined an array and was able to print the data in a table using your example framework:

for i = 0 to 1
html "<table width=1000px><tr>
<td width=15%>"+db$(0,i)+"</td>
<td width=10%>"+db$(1,i)+"</td>
<td width=15%>"+db$(2,i)+"</td>
<td width=40%>"+db$(3,i)+"</td>
<td width=5%>"+db$(4,i)+"</td>
<td width=10%>"+db$(5,i)+"</td>
<td width=5%>"+db$(6,i)+"</td></td>
</tr>
</table>"
next

I was hoping by defining the column widths this would force the data printed in that column to wrap if it was too long. However it just seems to expand the column width.

I am trying to convert a manual project tracking log (this currently exists as a word document) to a "Live" version on our intranet using sqlite. I would like the web based version to look similar to our paper version. Thats why I wanted to use a table and was trying to define the column widths and need the data to wrap and not cause the cells to expand width-wise to fit the data.

I would also like to use the built in table methods if possible. I can follow examples to add captions and column names. Again, I am just not familiar yet with html.

Any suggestions are appreciated. If a table is not the best way to present the data I am open to other suggestions.

Thanks,

Mike

[StefanPendl]

You need to add the word wrap style to the table columns you need word wrap for.
The width of the column will be adjusted to match the length of the longest word in any case.

dim db$(6,1)

for i = 0 to 1
  for j = 0 to 6
    db$(j,i) = str$(j)+" ... "+str$(i)
  next
next

WordWrap$ = "style='white-space: pre-wrap;";_
                   "white-space: -moz-pre-wrap;";_
                   "white-space: -pre-wrap;";_
                   "white-space: -o-pre-wrap;";_
                   "word-wrap: break-word'"

html "<table width=500px border=1>"

for i = 0 to 1
  html "<tr>
    <td width=15% "+WordWrap$+">"+db$(0,i)+"</td>
    <td width=10% "+WordWrap$+">"+db$(1,i)+"</td>
    <td width=15% "+WordWrap$+">"+db$(2,i)+"</td>
    <td width=40% "+WordWrap$+">"+db$(3,i)+"</td>
    <td width=5%  "+WordWrap$+">"+db$(4,i)+"</td>
    <td width=10% "+WordWrap$+">"+db$(5,i)+"</td>
    <td width=5%  "+WordWrap$+">"+db$(6,i)+"</td>
  </tr>"
next

html "</table>"

[mikegann]

Hi Stefan -

Thank you very much. This is exactly what I was trying to do.

I will need to play with this and I will probably have more questions.

Again, thanks to everyone for helping me get this far.

Best regards,

Mike

[mikegann]

OK - Another question on this table...

If a table was created using the built in Runbasic table functions, I see how to make all items in a particular column into links. These links can then be handled by a sub or branch label.

My table was created using html to control the table formating (column widths and word wrapping). Is there a way to do the same thing? Make data in a particular column into a link and handle it with a sub or branch label.

Again, thanks for the help.

Mike

[StefanPendl]

Below find a table including links to know, which row was selected.

dim db$(6,10)

for i = 0 to 10
  for j = 0 to 6
    db$(j,i) = str$(j)+" ... "+str$(i)
  next
next

'Word-Wrap style for different browsers
WordWrap$ = "style='white-space: pre-wrap;";_
                   "white-space: -moz-pre-wrap;";_
                   "white-space: -pre-wrap;";_
                   "white-space: -o-pre-wrap;";_
                   "word-wrap: break-word'"

html "<table style='width:8in' border=1>"
'html "<table style='width:200mm' border=1>"

for i = 0 to 10
  html "<tr>"
    html "<td width=15% " +WordWrap$+ ">"
      handle$ = "#tableLink."; i
      link #handle$, db$(0,i), [goHere]
    html "</td>"
    html "<td width=10% " +WordWrap$+ ">" +db$(1,i)+ "</td>"
    html "<td width=15% " +WordWrap$+ ">" +db$(2,i)+ "</td>"
    html "<td width=40% " +WordWrap$+ ">" +db$(3,i)+ "</td>"
    html "<td width=5%  " +WordWrap$+ ">" +db$(4,i)+ "</td>"
    html "<td width=10% " +WordWrap$+ ">" +db$(5,i)+ "</td>"
    html "<td width=5%  " +WordWrap$+ ">" +db$(6,i)+ "</td>"
  html "</tr>"
next

html "</table>"
wait

[goHere]
  myRow = val(word$(EventKey$, 2, "."))
  print "You selected Row ... "; myRow
  wait

[mikegann]

Hi Stefan -

Thank you once again. That seems to work great.

Best regards,

Mike