[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

table format

Posted on 2002-03-29
20
Medium Priority
?
155 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
Industry Leaders: 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 320 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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

656 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