PDA

Click to See Complete Forum and Search --> : Problem writing simple table (Table experts please help)

JSchwarz
11-06-2007, 11:18 AM
Can someone help me create this simple table (that it is simple and I cannot do it should *not* be taken as an indication of my programming ability :rolleyes: )

The table has five columns. The entire table should be width=100% (it should fill the screen's width).

The text in the first, second and third columns should not wrap. The first second and third columns should be fixed width, just wide enough to hold the text in them and should not wrap under any circumstances. But it should also work on any screen resolution.

The fourth and fifth columns should take up the remaining screen space (therefore the width=100%). Text in the fourth and fifth columns may be lengthy.

I can get most of this to work, but not at the same time. Here is my latest (inadequate) attempt. In this incarnation, the fixed width columns (1, 2, and 3) are too long.

<table style="border-style:solid; border-width: .06em; border-color:rgb(0,0,0); font-family: arial; font-size: 10px;" width=100%><tr style="background-color: rgb(0,0,0); color:white; font-weight: bold;"><TD width=125>Date</TD><TD width=125>Editor</TD><TD width=50>Action</TD><TD>Old Value</TD><TD>New Value</TD></TR>
<TR ><TD VALIGN=TOP >} + editDate + "</TD>"
<TD VALIGN=TOP >" + editName + "</TD>
<TD VALIGN=TOP>" + action + "</TD>
<TD VALIGN=TOP>" + newVal + "</TD>
<TD VALIGN=TOP>" + newVal + "</TD>
</TR></Table>


Thank you very much for your help.
-Jeff
WebJoel
11-06-2007, 02:54 PM
I don't know quite what your after here (and I haven't worked with TABLEs in years), but you want the 'header' parts that define the 'table data' columns, to be "<th>" (table headers), not "td"s..

...<style>
#tabledData {border-style:solid; border-width: .06em; border-color:rgb(0,0,0); font-family: arial; font-size: 10px; width:100%;}
#tabledData tr td {padding-left:10px; white-space:nowrap; border-right:1px solid silver;}
</style>


</head>
<body>

<table id="tabledData">
<tr style="background-color: rgb(0,0,0); color:white; font-weight: bold;">
<th>Date</th>
<th>Editor</th>
<th>Action</th>
<th>Old Value</th>
<th>New Value</th>
</TR>

<TR>
<TD VALIGN=TOP >} + editDate + "</TD>" <TD VALIGN=TOP >" + editName + "</TD> <TD VALIGN=TOP>" + action + "</TD> <TD VALIGN=TOP>" + newVal + "</TD> <TD VALIGN=TOP>" + newVal + "</TD> </TR></Table>

</body>
</html> and the " appears to be not in a TD...
JSchwarz
11-06-2007, 04:08 PM
Changing the TRs to THs didn't make a difference. The syntax error (the quotes) didn't exist in my real code (I abbreviated the code for this posting).

>and I haven't worked with TABLEs in years
If there's a better way than TABLEs to do this, then I'm all ears for that, too.

Thanks,
-Jeff
WebJoel
11-07-2007, 01:16 PM
Changing the TRs to THs didn't make a difference. The syntax error (the quotes) didn't exist in my real code (I abbreviated the code for this posting).

>and I haven't worked with TABLEs in years
If there's a better way than TABLEs to do this, then I'm all ears for that, too.

Thanks,
-Jeff No, -I didn't say or suggest that this was incorrect use of tables. :) The data is tablular, and that is exactly what TABLEs were made and intended for.
*I* just haven't worked with TABLEs much in over maybe 5 years... :)

A "<TH>" defines the nature of the content 'below it' (in "<td>"s), like if you listed:

VEGETABLES FRUITS NUTS LEGUMES

The above, would be 'table headers', with specific respective items below each. VEGETABLES data-cells might be "tomato, cucumber, squash etc" and below FRUITS, would be "apple, pear, blueberry etc etc" and so-forth.

The purpose of a "table header" in this context is to alert screen-readers/text-to-braille/text-to-speech for the handicapped, of what 'column' each 'data cell' is part & parcel to. This is correct validating behavior.

...The syntax error (the quotes) didn't exist in my real code (I abbreviated the code for this posting)... I figured that. I only have what you posted in the thread starter post to work with (below, and top of thread).<table style="border-style:solid; border-width: .06em; border-color:rgb(0,0,0); font-family: arial; font-size: 10px;" width=100%>
<tr style="background-color: rgb(0,0,0); color:white; font-weight: bold;"><TD width=125>Date</TD><TD width=125>Editor</TD>
<TD width=50>Action</TD>
<TD>Old Value</TD><TD>New Value</TD></TR>
<TR ><TD VALIGN=TOP >} + editDate + "</TD>" <TD VALIGN=TOP >" + editName + "</TD> <TD VALIGN=TOP>" + action + "</TD> <TD VALIGN=TOP>" + newVal + "</TD> <TD VALIGN=TOP>" + newVal + "</TD> </TR></Table>

So, -where are we with this? What is not right still? Like I said, "I don't know quite what your after here... " :) If you use the code that I pasted previous (including the "<style></style>"), you get a very close approximation of what I think you are after. :confused:
Kor
11-09-2007, 08:08 AM
Better uses classes than CSS styles. And don't mix CSS attributes with HTML attributes. If you decided to use CSS, then use CSS all over....