Solved

table format

Posted on 2002-03-29
20
149 Views
Last Modified: 2010-04-09
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.
0
Comment
Question by:Quanb
  • 7
  • 6
  • 4
  • +2
20 Comments
 
LVL 12

Expert Comment

by:lexxwern
ID: 6904743
<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
 
LVL 9

Expert Comment

by:Venci75
ID: 6904746
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6904758
Venci75 coincidence? 2:51 and 2:54?

lexxwern
0
 
LVL 9

Expert Comment

by:Venci75
ID: 6904761
You can see - the answer is one. I admit - you were the first. Sorry for the duplication!
0
 

Author Comment

by:Quanb
ID: 6904807
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6904935
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6905014
all fine Venci75;
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6905091
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
 
LVL 19

Expert Comment

by:webwoman
ID: 6905294
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6905302
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 12

Expert Comment

by:lexxwern
ID: 6905351
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6905367
cd& i would want to know about the css border shorthand.

lexxwern
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6905465
>>>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
 
LVL 12

Expert Comment

by:lexxwern
ID: 6906469
thanks cd&;

Quanb whats the status?

lexxwern
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6940697
Quanb,

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

Cd&
0
 

Author Comment

by:Quanb
ID: 6941903
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
 

Author Comment

by:Quanb
ID: 6944399
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 80 total points
ID: 6945782
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
 

Author Comment

by:Quanb
ID: 6947298
Many thanks for your help.

Quanb
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6947430
Glad we could help.  Thanks for the A. :^)

Cd&
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now