Solved

table format

Posted on 2002-03-29
20
148 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

708 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

17 Experts available now in Live!

Get 1:1 Help Now