table format

Hi all,

I have a html table, which is created from VB.

<table width="50%" border="1" cellpadding="1" cellspacing="0" bordercolor="#333333">
    <tr>
      <td width="26%">Firstname</td>
      <td width="24%">Surname</td>
      <td width="26%">Course</td>
      <td width="24%">Mark</td>
    </tr>
    <tr>
      <td width="26%" height="27">Murphy</td>
      <td width="24%" height="27">Jack</td>
      <td width="26%" height="27">Biochemistry</td>
      <td width="24%" height="27">34%</td>
    </tr>
    <tr>
      <td width="26%" height="22">&nbsp;</td>
      <td width="24%" height="22">&nbsp;</td>
      <td width="26%" height="22">Physical Chemistry</td>
      <td width="24%" height="22">55%</td>
    </tr>
    <tr>
      <td width="26%">Anne </td>
      <td width="24%">O'Brien</td>
      <td width="26%">Inorganic Chemistry</td>
      <td width="24%">62%</td>
    </tr>
    <tr>
      <td width="26%">&nbsp;</td>
      <td width="24%">&nbsp;</td>
      <td width="26%">Organic Chemistry</td>
      <td width="24%">34%</td>
    </tr>
    <tr>
      <td width="26%">&nbsp;</td>
      <td width="24%">&nbsp;</td>
      <td width="26%">Electrochemistry</td>
      <td width="24%">65%</td>
    </tr>
  </table>

If you run the above code, you will see that for the same student doing several courses, there are empty rows underneath. I deliberately did this because I didn't want the names repeated. But what I really want to be able to do is not have empty rows but instead have blank spaces between the names i.e. for each student, there will be only one line separating the names and the courses will be as the same since they are different courses. I hope I am making sense. Does anyone have any ideas? All suggestions welcome.
QuanbAsked:
Who is Participating?
 
COBOLdinosaurCommented:
Okay a few minor adjust ment in the stylesheet.  The left side is adjusted by adding a one pixel left boreder to the name cells. That left the horizontal lines two different thickness including the bottom of the table.  Trying to make the all horizontal lines two thick would mean a bunch of additional scripting for generation because it would be necessary to  know when the current item was tha last one. so I made them all 1 pixel.  that left the problem with the bottom which I solved by forcing a two pixel bottom in the stylesheet.  here is the new version:

<html><head><title>table</title>
<style>
table {border-bottom:2px solid #333333}
td {border:1px solid #333333;border-bottom:0px solid #333333}
td.name {border:0px solid #333333;border-right:1px solid #333333;border-left:1px solid #333333}
</style>
</head><body>
<table width="50%" border="1" cellpadding="1" cellspacing="0" bordercolor="#333333">
<tr>
<td width="26%">Firstname</td>
<td width="24%">Surname </td>
<td width="26%">Course</td>
<td width="24%">Mark</td>
</tr>
<tr>
<td class="name" style="border-top:1px solid #333333" width="26%" height="27">Murphy</td>
<td class="name" style="border-top:1px solid #333333" width="24%" height="27">Jack</td>
<td width="26%" height="27">Biochemistry</td>
<td width="24%" height="27">34%</td>
</tr>
<tr>
<td class="name" width="26%" height="22">&nbsp;</td>
<td class="name" width="24%" height="22">&nbsp;</td>
<td width="26%" height="22">Physical Chemistry</td>
<td width="24%" height="22">55%</td>
</tr>
<tr>
<td class="name" style="border-top:1px solid #333333" width="26%">Anne </td>
<td class="name" style="border-top:1px solid #333333" width="24%">O'Brien</td>
<td width="26%">Inorganic Chemistry</td>
<td width="24%">62%</td>
</tr>
<tr>
<td class="name" width="26%">&nbsp;</td>
<td class="name" width="24%">&nbsp;</td>
<td width="26%">Organic Chemistry</td>
<td width="24%">34%</td>
</tr>
<tr>
<td class="name" width="26%">&nbsp;</td>
<td class="name" width="24%">&nbsp;</td>
<td width="26%">Electrochemistry</td>
<td width="24%">65%</td>
</tr>
</table>


</body></html>
0
 
lexxwernCommented:
<table width="50%" border="1" cellpadding="1" cellspacing="0" bordercolor="#333333">
   <tr>
     <td width="26%">Firstname</td>
     <td width="24%">Surname</td>
     <td width="26%">Course</td>
     <td width="24%">Mark</td>
   </tr>
   <tr>
     <td width="26%" height="27" rowspan="2">Murphy</td>
     <td width="24%" height="27" rowspan="2">Jack</td>
     <td width="26%" height="27">Biochemistry</td>
     <td width="24%" height="27">34%</td>
   </tr>
   <tr>
     <td width="26%" height="22">Physical Chemistry</td>
     <td width="24%" height="22">55%</td>
   </tr>
   <tr>
     <td width="26%" rowspan="3">Anne </td>
     <td width="24%" rowspan="3">O'Brien</td>
     <td width="26%">Inorganic Chemistry</td>
     <td width="24%">62%</td>
   </tr>
   <tr>

     <td width="26%">Organic Chemistry</td>
     <td width="24%">34%</td>
   </tr>
   <tr>

     <td width="26%">Electrochemistry</td>
     <td width="24%">65%</td>
   </tr>
 </table>

try this. is this what you are looking for;?

lexxwern
0
 
Venci75Commented:
check this:
use rowspan attribute of <td> tag
<table width="50%" border="1" cellpadding="1" cellspacing="0" bordercolor="#333333">
   <tr>
     <td width="26%">Firstname</td>
     <td width="24%">Surname</td>
     <td width="26%">Course</td>
     <td width="24%">Mark</td>
   </tr>
   <tr>
     <td rowspan="2" width="26%" height="27">Murphy</td>
     <td rowspan="2" width="24%" height="27">Jack</td>
     <td width="26%" height="27">Biochemistry</td>
     <td width="24%" height="27">34%</td>
   </tr>
   <tr>
     <td width="26%" height="22">Physical Chemistry</td>
     <td width="24%" height="22">55%</td>
   </tr>
   <tr>
     <td rowspan="3" width="26%">Anne </td>
     <td rowspan="3" width="24%">O'Brien</td>
     <td width="26%">Inorganic Chemistry</td>
     <td width="24%">62%</td>
   </tr>
   <tr>
     <td width="26%">Organic Chemistry</td>
     <td width="24%">34%</td>
   </tr>
   <tr>
     <td width="26%">Electrochemistry</td>
     <td width="24%">65%</td>
   </tr>
 </table>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
lexxwernCommented:
Venci75 coincidence? 2:51 and 2:54?

lexxwern
0
 
Venci75Commented:
You can see - the answer is one. I admit - you were the first. Sorry for the duplication!
0
 
QuanbAuthor Commented:
You got the right idea but there is still a problem. The records are written out one at a time, so there is no way of knowing what the rowspan is beforehand. Is there a way of just manipulating the line itself?
0
 
lexxwernCommented:
put all the subjects in one cell, thats the solution if you have to use tables; if you're using div's then the solution can be a lot more flexible;

lexxwern
0
 
lexxwernCommented:
all fine Venci75;
0
 
COBOLdinosaurCommented:
Try it this way.  It probably has some issues with older browsers if you still have to support relics, but should be about right for modern environments.

If it need s alittle more tweaking, let me know.

Cd&



<html><head><title>table</title>
<style>
   td {border:1px solid #333333}
   td.name {border:0px solid #333333;border-right:1px solid #333333}
</style>
</head><body>
<table width="50%" border="1" cellpadding="1" cellspacing="0" bordercolor="#333333">
<tr>
<td width="26%">Firstname</td>
<td width="24%">Surname</td>
<td width="26%">Course</td>
<td width="24%">Mark</td>
</tr>
<tr>
<td class="name" style="border-top:1px solid #333333" width="26%" height="27">Murphy</td>
<td class="name" style="border-top:1px solid #333333" width="24%" height="27">Jack</td>
<td width="26%" height="27">Biochemistry</td>
<td width="24%" height="27">34%</td>
</tr>
<tr>
<td class="name" width="26%" height="22">&nbsp;</td>
<td class="name" width="24%" height="22">&nbsp;</td>
<td width="26%" height="22">Physical Chemistry</td>
<td width="24%" height="22">55%</td>
</tr>
<tr>
<td class="name" style="border-top:1px solid #333333" width="26%">Anne </td>
<td class="name" style="border-top:1px solid #333333" width="24%">O'Brien</td>
<td width="26%">Inorganic Chemistry</td>
<td width="24%">62%</td>
</tr>
<tr>
<td class="name" width="26%">&nbsp;</td>
<td class="name" width="24%">&nbsp;</td>
<td width="26%">Organic Chemistry</td>
<td width="24%">34%</td>
</tr>
<tr>
<td class="name" width="26%">&nbsp;</td>
<td class="name" width="24%">&nbsp;</td>
<td width="26%">Electrochemistry</td>
<td width="24%">65%</td>
</tr>
</table>


</body></html>
0
 
webwomanCommented:
Think outside the box guys... try it this way. (and your names are inconsistent -- one was last/first and one was first/last)

<table width="50%" cellpadding="1" cellspacing="0">
   <tr>
     <td width="76%">Surname, Firstname<br>Course</td>
     <td width="24%">Mark</td>
   </tr>
   <tr>
     <td colspan="2" bgcolor="#C0C0C0">Murphy, Jack</td>
   </tr>
   <tr>
     <td align="right">Biochemistry</td>
     <td>34%</td>
   </tr>
   <tr>
     <td align="right">Physical Chemistry</td>
     <td>55%</td>
   </tr>
   <tr>
     <td colspan="2" bgcolor="#COCOCO">O'Brien, Anne </td>
   </tr>
   <tr>
     <td align="right">Inorganic Chemistry</td>
     <td>62%</td>
   </tr>
   <tr>
     <td align="right">Organic Chemistry</td>
     <td>34%</td>
   </tr>
   <tr>
     <td align="right">Electrochemistry</td>
     <td>65%</td>
   </tr>
 </table>

You don't need the widths after the first header row, and you don't need heights at all. Nor do you need a border at all, since the names have a background color, span the width of the table and clearly indicate what courses go with what person. I have the courses aligned right so the name stands out more, but they could be set with a style with an indent, or you could use a nbsp in an extra cell, or you could make the name larger/bolder.

If you're generating this out of a database, it would be easy to set up -- it's how I usually set up this type of thing.
0
 
COBOLdinosaurCommented:
ww,

You might want to do something about the alignment of the course heading.  It looks a little out of place way over to the left.

Cd&
0
 
lexxwernCommented:
ww, Quanb's the designer here, i think we all should try to solve his problem than experiment with our tables;

we all can give a dozen of different suggestions and in the process forget that we should ber giving solution's;

i hope im not rude, but have conveyed my point;

lexxwern
Happy Holi!
0
 
lexxwernCommented:
cd& i would want to know about the css border shorthand.

lexxwern
0
 
COBOLdinosaurCommented:
>>>i would want to know about the css border shorthand.

http://www.blooberry.com/indexdot/css/properties/border/border.htm

Local style property cascades over the style sheet declaration.  Unlimited formatting possibilities.

Cd&

0
 
lexxwernCommented:
thanks cd&;

Quanb whats the status?

lexxwern
0
 
COBOLdinosaurCommented:
Quanb,

Are you going to close this out, or did you just post it to waste our time?

Cd&
0
 
QuanbAuthor Commented:
really really sorry guys but i am very busy working on other stuff at the moment so haven't got round to doing this. I will try to get back to you as soon as possible.
0
 
QuanbAuthor Commented:
Thanks Cd&, the code was exactly what I was looking for. Just one more thing.. the border on the left side of the table looks thinner than the other side. I tried to add a left border style to it but when I ran the code, there were noticeable gaps in the borderline. Any suggestions? Thanks.
0
 
QuanbAuthor Commented:
Many thanks for your help.

Quanb
0
 
COBOLdinosaurCommented:
Glad we could help.  Thanks for the A. :^)

Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.