Solved

table format

Posted on 2002-03-29
20
152 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

717 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