Solved

CSS and table IS wrong

Posted on 2013-11-06
11
286 Views
Last Modified: 2013-11-16
Hello. Im SUPER stuck. . . Im trying to make a simple table. . . But colspan WONT Work right.

I want a table which is 6 col so i can make everything looks like the bot on this image. But whatever i do, and whatever i try to put in CSS or the .php it will show wrong. . .
I tried to use %, didnt Work. I tried defining Width of a <td> in CSS, didnt Work.

Worked with this for 5 hours now. Didnt archive a simple table yet.

ATTENTION: Could it be the fetch array ruin it? Also the name.php code is called into index.php

 Top is how it looks, but is what i want.
Here is the name.php
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)) {
?>
<table class="table1" >
  <tr>
    <td class="table1_arrangement" colspan="6">
     <span class="bold">&nbsp <?php echo $row['_arrangement'] ; ?> </span>
    </td>
  </tr>
  <tr>
    <td class="table1_beskrivelse" colspan="6" >
      <?php echo $row['_beskrivelse']; ?>
    </td>
  </tr>
  <tr>
    <td class="table1_title-Adresse" colspan="1">
      <span class="bold">Adresse:</span>
    </td>
    <td class="table1_addresse" colspan="4">
      <?php echo  $row['_adresse']; ?>
    </td>
    <td class="table1_gmaps" rowspan="2" colspan="1" >
      <a href="http://<?php echo $row['_link']; ?>" target="_blank"><img src="images/asd.png" style="width: 41px; height: 41px;" /></a>
    </td>
  </tr>
  <tr>
    <td class="table1_title-link" colspan="1">
      <span class="bold">Link:</span>
    </td>
    <td class="table1_link" colspan="4" >
      <a href="http://<?php echo $row['_link']; ?>" target="_blank">
        <?php echo $row['_link']; ?>
      </a>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <img class="img_1"  src="image.php?_nr=<?php echo $row['_nr']; ?>" style=" width: 200px; height: 118px;" />
    </td>
    <td colspan="2">
      <img class="img_2" src="image_2.php?_nr=<?php echo $row['_nr']; ?>" style="width: 200px; height: 118px;" />
    </td>
	<td colspan="2">
      <img class="img_2" src="image_2.php?_nr=<?php echo $row['_nr']; ?>" style=" width: 200px;height: 118px;" />
    </td>
  </tr>
</table>
<table class="table2"></table>
<?php }

Open in new window


And here is the CSS
.bold {
  font-weight: bold;
}
table.table1 {
  background-color: #D8D8D8;
  border: 3px solid black;
  width: 610px;
  margin-left:90px;
}
td.table1_arrangement {
  border: none;
  background-color: #A4A4A4;
}
td.table1_beskrivelse {
  border: 1px solid #A4A4A4;
}
td.table1_title-Adresse {
  border: 1px solid #A4A4A4;
 
}
td.table1_title-link {
  border: 1px solid #A4A4A4;
 
}
td.table1_addresse {
  border: 1px solid #A4A4A4;

}
td.table1_gmaps {
border: 1px solid #A4A4A4;
}
td.table1_link {
  border: 1px solid #A4A4A4;

}

table.table2 {
  height: 16px;
}

Open in new window

0
Comment
Question by:Mike Kristensen
  • 3
  • 3
  • 2
  • +3
11 Comments
 
LVL 7

Expert Comment

by:rgranlund
Comment Utility
line 27 - 35.  You need one more td with colspan 1
0
 
LVL 15

Expert Comment

by:pateljitu
Comment Utility
Please try this code:

<table class="table1" >
  <tr>
    <td class="table1_arrangement" colspan="3">
     <span class="bold">&nbsp <?php echo $row['_arrangement'] ; ?></span> = 6
    </td>
  </tr>
  <tr>
    <td class="table1_beskrivelse" colspan="3" >
      <?php echo $row['_beskrivelse']; ?> = 6
    </td>
  </tr>
  <tr>
    <td class="table1_title-Adresse">
      <span class="bold">Adresses:  = 1</span>
    </td>
    <td class="table1_addresse">
      <?php echo  $row['_adresse']; ?>  = 4
    </td>
    <td class="table1_gmaps" rowspan="2">
      <a href="http://<?php echo $row['_link']; ?>" target="_blank"><img src="images/asd.png" style="width: 41px; height: 41px;" /></a>
       = col 1
       = rows 2
    </td>
  </tr>
  <tr>
    <td class="table1_title-link">
      <span class="bold">Link:  = 1</span>
    </td>
    <td class="table1_link">
      <a href="http://<?php echo $row['_link']; ?>" target="_blank">
        <?php echo $row['_link']; ?> = 4
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <img class="img_1"  src="image.php?_nr=<?php echo $row['_nr']; ?>" style=" width: 200px; height: 118px;" />
    </td>
    <td>
      <img class="img_2" src="image_2.php?_nr=<?php echo $row['_nr']; ?>" style="width: 200px; height: 118px;" />
    </td>
	<td rowspan="1">
      <img class="img_2" src="image_2.php?_nr=<?php echo $row['_nr']; ?>" style=" width: 200px;height: 118px;" />
    </td>
  </tr>
</table>

Open in new window

0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 125 total points
Comment Utility
You are using the 20th century technique of using a table to manage layout. Most professionals began abandoning that 10 years ago when CSS made it possible to do reliable layouts.

With care and detailed CSS declarations you may get it correct and perfect for a single resolution/browser/device but it will be easily broken by user setting; or changes in resolution, browser, or device.

Tables are for presenting tabular data not layout.

Cd&
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
Comment Utility
It appears to act that way because the smallest element you are actually using is 2 columns wide.  Use this code to the top of the table to define 6 separate columns and it should work.  
<table border="1" cellpadding="0" cellspacing="0" summary="" width="600">
<tr style="height:1px;"><td width="100"></td><td width="100"></td><td width="100"></td><td width="100"></td><td width="100"></td><td width="100"></td></tr>

Open in new window

0
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 125 total points
Comment Utility
greetings Mikethk, I encourage you to keep trying HTML code, and see the results, and then try and learn what you re doing wrong, and try it again, I know from experience that this is frustrating, but you do learn more this way! !

I looked at your code work and the comments from other experts, and I do not see that there is a definite "fix" suggested so far, so I will give my opinion. Many suggestions so far see part of problem you have, but the main factor is that you do not fully understand that HTML tables a purposefully made to be flexible and changing as dynamic (changing width and height for every <td> acording to the different content) , stacks of rectangles (rows and columns).
The way you have your <table> code, you DO HAVE the columns for columnspan and rowspan correct for the table stucture, HOWEVER for your problem, the widths of the many <td> are auto adjusting to the many different contents they have, so it does not arrange as you want it to in the two rows with the colspan="4", The reason is the first column adjusts width to other factors, and the right-last column also adjusts width to other factors, my solution is to set a width for the first and last column in the first row with the colspan="4". . .

Next, you still have this -
<table class="table2"></table>
    empty tables are ALWAYS incorrect html, a more proper html structure to use is a <div> as -
<div class="table2"></div>
   this will have the same effect to give you a spacing between the tables, HOWEVER, this is a bad way to have spacing, even though it is more correct html,
to do better code you need to give the table style as    margin-bottom:16px;    which will do the same spacing without an empty html structure.

Now to your STYLE, the way you have the style is technicality correct, however it is unusual and inefficient You do not need and should not use the   table    before the   table.table1 { }
would be be more "conventional" as this -
.table1 { }
     and requires you to do less typing

next you have -
td.table1_beskrivelse {
  border: 1px solid #A4A4A4;
}
      again you do not need the     td    before the    .table1_beskrivelse
but you have the same setting for a border in in 6 differerent styles, this is inefficient code writing, to have more than one style that is the same thing.

what you do not seem to know is that IF you have a space between a style name and the thing (like div or td) inside that style block, that what you place in that { } for the style will apply to EVERY div or td inside it, maybe like -
.table1 td{
border:1px solid #aaa;
}
     this will have each and every <td> inside the class="table1" have a one pixel border, and can save you a ton of code writing;

below is some code that I did in firefox, that looks like it give a display view closer to what you need for this.
<style>
.bold{font-weight:bold;}

.teamStats{
width:608px;
border:3px solid #000;
background-color:#ddd;
margin-bottom:16px;  /* have added a bottom margin */
}

.teamStats td{ /* will give a border to every <td> inside teamStats */
border:1px solid #aaa;
}

.topRow { /* need to cancel the border on top row *;
border:0;
background-color:#aaa;
}

.w97{width:97px;}
</style>

<table class="teamStats">
<tr><td class="topRow bold" colspan="6">Top ROW or Row1</td></tr>
<tr><td colspan="6">Next ROW or Row2</td></tr>
<tr><td class="w97 bold">Adresse:</td><td colspan="4">colspan is 4 for this TD</td><td class="w97" rowspan="2"><img src="images3/menubg.gif" style="width: 41px; height: 41px;" /></td></tr>
<tr><td class="bold">Link:</td><td colspan="4">colspan is 4 for this TD</td></tr>
<tr><td colspan="2"><img src="images3/menubg.gif" style="width:200px;height:118px;" /></td><td colspan="2"><img src="images3/menubg.gif" style="width:200px;height:118px;" /></td><td colspan="2"><img src="images3/menubg.gif" style="width:200px;height:118px;" /></td></tr>
</table>

Open in new window

you can use TWO styles in a class with just a space between them      class="topRow bold"
you do not need the spans to give the BOLD, just set it to the <td> to get a bold for text in the <td>
I hope you can get some ideas from this to help you

something else to consider, the <td> width inside a table will not be evenly divided width according to to the width set for a table here to do a 600 width table, and you can NOT expect the td to auto go to 100 width,  also if you have a table width of 600, and you do have 6 <td> in a row, you can not correctly define a width of 100px for all of the <td> because there is a table column-row spacing if ONE pixel and I think that there are 8 spacings for that row, so mathamatically you can divide 592 (600-8) by 6 to get an estimate for the columns width, believe me, computers are very accurate at math, , much more than people are.
0
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.

 

Author Comment

by:Mike Kristensen
Comment Utility
Thx. for your answers.... I tried to do this with <div>'s instead. As COBOLdinosaur mentioned, tables might not be good for layout's. I guees i agree from my XP.

Anyway, i will try to make it simpler using a table later. I totally understand everything you write Slick812, even without making the coding yet i think i know how to do it now. Thx. for that. Im using tables to layout for storing data in mysql, so im surely going to need it.

Here is how it looks now... I bet you wont like it :)
table1 is for the fetch array to work properly.... :S

<table class="table1">
<div class="box_1">
<div class="box_oplevelse"> &nbsp <?php echo $row['_arrangement'] ; ?> </div>
<div class="box_beskrivelse"> <span class="box_beskrivelse_text_margin"> <?php echo $row['_beskrivelse'] ; ?></span> </div>
<span class="box_adresse_title"> &nbsp Adresse: <span class="box_adresse">  <?php echo  $row['_adresse']; ?> </span> </span> 
<span class="box_link_title"> &nbsp Link: <a class="box_link" href="http://<?php echo $row['_link']; ?>" target="_blank"><?php echo $row['_link']; ?></a> </span> 
<a class="gmaps" href="http://<?php echo $row['_link']; ?>" target="_blank"><img src="images/asd.png" style="width: 41px; height: 41px;" /></a>
<img class="box_img_1"  src="image.php?_nr=<?php echo $row['_nr']; ?>" style=" width: 200px; height: 118px;" />
<img class="box_img_2"  src="image_2.php?_nr=<?php echo $row['_nr']; ?>" style=" width: 200px; height: 118px;" />
<img class="box_img_3"  src="image_3.php?_nr=<?php echo $row['_nr']; ?>" style=" width: 200px; height: 118px;" />
</div>
</table>

Open in new window


.box_1{background-color: #D8D8D8;position:absolute;border: 3px solid black;width: 609px;height: 245px;left:100px;z-index:1;}
.box_oplevelse{font-weight: bold;background-color: #A4A4A4;position:absolute;width: 609px;height: 25px;left:0px;}
.box_beskrivelse{background-color: #D8D8D8;position:absolute;width: 609px;height: 50px;left:0px;top:25px;}
.box_beskrivelse_text_margin {position:absolute;left:5px;top:5px;}
.box_adresse_title {background-color: #D8D8D8;font-weight: bold;position:absolute;width:609px;height:25px;top:100px;left:0px;}
.box_adresse {position:absolute;left: 80px;font-weight:normal;}
.box_link_title {background-color: #D8D8D8;font-weight: bold;position:absolute;width:609px;height:25px;top:75px;left:0px;}
.box_link {position:absolute;left: 80px;font-weight:normal;}
.gmaps {position:absolute;left: 550px;top:75px;}
.box_img_1 {position:absolute;top:125px;left:2px;cursor:pointer;} .img.box_img_1{z-index:5;-webkit-transition: all 1.3s;-moz-transition: all 1.3s;-ms-transition: all 1.3s;}
.box_img_2 {position:absolute;top:125px;left:204px;cursor:pointer;} .img.box_img_2{z-index:5;-webkit-transition: all 1.3s;-moz-transition: all 1.3s;-ms-transition: all 1.3s;}
.box_img_3 {position:absolute;top:125px;left:406px;cursor:pointer;} .img.box_img_3{-webkit-transition: all 1.3s;-moz-transition: all 1.3s;-ms-transition: all 1.3s;}
.zoomed{z-index:6;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);z-index:6;}
table.table1 {height: 280px;}

Open in new window

0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
@Slick812, if you look at my comment right above your, you will see a working solution.  Just make those two lines the first two lines in the table and you will see the rest of the table work properly.  For what ever reason, you have to define every column in the table for it to work properly.  Otherwise, it appears to take the smallest defined column as the minimum width.  And in the original table, the smallest column was defined with colspan="2".
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
@DaveBaldwin OK, but there is more going on in that table than having a width definition for 6 empty <td>, I did not try in code your fix, and I can see how it may help to do better display, but I really really try to avoid adding unnecessary (in my view) empty html structures.

= = = = = = = = = = = = =

@Mikethk Oh brother, you're wearing on my time, with your new NON-TABLE <div> code, and yet you have a -
<table class="table1">
   this is really bad code thinking, you avoid the table column and row thing and yet you have a <table> in your html.


Your whole code thinking for this will not work, , BECAUSE  you have -
.box_1{ position:absolute; }
    the position:absolute; for the container will disrupt things on your page, and disrupt the relationships for placements

as far as I am concerned you have so much misplaced and mis-used CSS in this you need to start again, you seem to think that the way to use CSS positioning is with position:absolute; , , but this is not true, there are many things that benefit from position:absolute;  but your layout for this is not one of them, in my view. As far as I can tell your use if the  z-index:  is not useful and makes no sense to me. I do not see any purpose to your adding the box_ prefix to all of the style things, you should use prefixes to Differentiate between different style elements having at least 2 different prefixes like box_ and span_ . . . ..  you have this  background-color: #D8D8D8;  in the box_ styles and it does NOTHING!,  as you already have  .box_1{background-color: #D8D8D8;}  as the Container background.

anyway I will not explain my CSS and DIV code setup below, maybe you can see some help for you or not -
<style>
.teamInfo {
width: 620px;
background-color: #D8D8D8;
border: 3px solid black;
margin-left:100px;
}

.teamInfo div{
border:1px solid #A4A4A4;
}

.firstRow {
background-color: #A4A4A4;
font-weight: bold;
border:0;
}

.secondRow {
padding-left:5px;
}

.imgDiv {
clear:both;
text-align:center;
}
</style>

<div class="teamInfo">
<div class="firstRow"> &nbsp _arrangement </div>
<div class="secondRow">  _beskrivelse </div>
<a href="http://_link" target="_blank"><img src="images3/menubg.gif" style="width: 41px; height: 41px; float:right; margin-right:2px;border:1px solid #A4A4A4;" /></a>
<div class="bold"> &nbsp Adresse:   _adresse </div> 
<div> &nbsp Link: <a href="http://_link" target="_blank">_link</a> </div> 
<div class="imgDiv">
<img src="images3/menubg.gif" style=" width: 200px; height: 118px;" /> 
<img src="images3/menubg.gif" style=" width: 200px; height: 118px;" /> 
<img src="images3/menubg.gif" style=" width: 200px; height: 118px;" />
</div>
</div>

Open in new window

, this does NOT match your DIV display, but I feel it is closer to what you may need, there are many adjustments for the CSS and some placements, which I did not do, or really care about, but please reconsider your over-use of the  position:absolute;   and placement. My CSS above is just a first draft, I do not have time to work out the specific placemants. please try and use some style padding and or margin for some specific element placement, in my view this is more useful that a ton of position:absolute; code
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
Oh one more thing, although COBOLdinosaur  makes an excellent point about using newer CSS methods for web page positioning, the <table> is a much used and well respected way to present MySQL SELECT info to the web page user, and can reduce the html code needed, as the  switch to CSS DIV placement may need more complex code just to have columns and rows, but the <table> is alive and well in the new CSS3 and HTML5 standards, with added CSS just for tables!
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 250 total points
Comment Utility
This should cause the 'colspan' directions to work properly.
<table border="1" cellpadding="0" cellspacing="0" summary="" width="600">
<tr style="height:1px;"><td width="100"></td><td width="100"></td><td width="100"></td><td width="100"></td><td width="100"></td><td width="100"></td></tr>
  <tr>
    <td class="table1_arrangement" colspan="6">
     <span class="bold">&nbsp <?php echo $row['_arrangement'] ; ?> </span>
    </td>
  </tr>
  <tr>
    <td class="table1_beskrivelse" colspan="6" >
      <?php echo $row['_beskrivelse']; ?>
    </td>
  </tr>
  <tr>
    <td class="table1_title-Adresse" colspan="1">
      <span class="bold">Adresse:</span>
    </td>
    <td class="table1_addresse" colspan="4">
      <?php echo  $row['_adresse']; ?>
    </td>
    <td class="table1_gmaps" rowspan="2" colspan="1" >
      <a href="http://<?php echo $row['_link']; ?>" target="_blank"><img src="images/asd.png" style="width: 41px; height: 41px;" /></a>
    </td>
  </tr>
  <tr>
    <td class="table1_title-link" colspan="1">
      <span class="bold">Link:</span>
    </td>
    <td class="table1_link" colspan="4" >
      <a href="http://<?php echo $row['_link']; ?>" target="_blank">
        <?php echo $row['_link']; ?>
      </a>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <img class="img_1"  src="image.php?_nr=<?php echo $row['_nr']; ?>" style=" width: 200px; height: 118px;" />
    </td>
    <td colspan="2">
      <img class="img_2" src="image_2.php?_nr=<?php echo $row['_nr']; ?>" style="width: 200px; height: 118px;" />
    </td>
	<td colspan="2">
      <img class="img_2" src="image_2.php?_nr=<?php echo $row['_nr']; ?>" style=" width: 200px;height: 118px;" />
    </td>
  </tr>
</table>

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Consider the time that has been spent on this. Making a table work for layout Dave's latest should work), developing a hybrid, or trying to do it with divs and CSS fit the table style grid. has taken a lot of time.

It is not just the code, but the idea that the old table layout should use divs to replace cells is no different than using a table, and in that case you might as well use a table.  

Moving from table based layouts to modern HTML5/CSS3 starts with a change of mindset that move srom the static monolithic table to a collection of fluid, flexible, and responsive set of components that come together; react to the environment; react to the user, and automatically optimize the content presentation.

If the thinking remains focused on rigid structure instead if dynamic, responsive content-centric presentation, then old methods are fine but not very commercially viable.

Cd&
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
how can I dected if URL has variable? 7 22
lastpass auto fill login form 5 22
php image upload 3 24
HTML CSS 7 15
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to count occurrences of each item in an array.
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…

744 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

19 Experts available now in Live!

Get 1:1 Help Now