Styled Table

[prnoct90]

I am currently working on a site, and the problem is, that I have a two column table, and I want it to be split into four columns. Below is the way I want the page to end up looking (I hand coded this).

 

http://www.yukosubscribe.com/tsubasa.php

 

Now here is the way it actually look now when the data has been called from the database.

 

http://www.yukosubscribe.com/series.php?seriesid=1

 

See the difference. Im not sure how to accomplish this. Also, the very first column and the third column have to have a particular class. The code for both pages is below. PLEASE NOTE: Im still having displays problems with this site in ie6 (go figure), so it would probably be best if you used another browser (I reccomend Mozilla Firefox ).

 

tsubasa.php

<?php require 'main/header.php' ?>
				<h1>Subscribe to Tsubasa: RESERVoir CHRoNiCLE</h1>
				<p>On this page you can subscribe to the Tsubasa manga. When you subscribe to this manga, we will ship you a new volume of the manga at specific intervals chosen by you (ex. per week, etc.). The schedule for each volume is below; you can start your subscription at any place in this schedule.</p>
				<p>Price per volume: $8.50 (includes Free First Class Shipping)</p>
				<table>
					<tr>
						<td class="rows"><img class="number" src="images/tsubasa/vol1n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 1</td>
						<td class="rightc"><img class="number" src="images/tsubasa/vol2n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 2</td>
					</tr>
					<tr>
						<td class="rows"><img class="number" src="images/tsubasa/vol3n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 3</td>
						<td class="rightc"><img class="number" src="images/tsubasa/vol4n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 4</td>
					</tr>
					<tr>
						<td class="rows"><img class="number" src="images/tsubasa/vol5n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 5</td>
						<td class="rightc"><img class="number" src="images/tsubasa/vol6n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 6</td>
					</tr>
					<tr>
						<td class="rows"><img class="number" src="images/tsubasa/vol7n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 7</td>
						<td class="rightc"><img class="number" src="images/tsubasa/vol8n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 8</td>
					</tr>
					<tr>
						<td class="rows"><img class="number" src="images/tsubasa/vol9n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 9</td>
						<td class="rightc"><img class="number" src="images/tsubasa/vol10n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 10</td>
					</tr>
					<tr>
						<td class="rows"><img class="number" src="images/tsubasa/vol11n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 11</td>
						<td class="rightc"><img class="number" src="images/tsubasa/vol12n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 12</td>
					</tr>
					<tr>
						<td class="rows"><img class="number" src="images/tsubasa/vol13n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 13</td>
						<td class="rightc"><img class="number" src="images/tsubasa/vol14n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 14</td>
					</tr>
					<tr>
						<td class="rows"><img class="number" src="images/tsubasa/vol15n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 15</td>
						<td class="rightc"><img class="number" src="images/tsubasa/vol16n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 16</td>
					</tr>
					<tr>
						<td class="rows"><img class="number" src="images/tsubasa/vol17n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 17</td>
						<td class="rightc"><img class="number" src="images/tsubasa/vol18n.gif" /></td>
						<td>Start Here</td>
						<td>Volume 18</td>
					</tr>
					<tr>
						<td class="rows"><img class="number" src="images/noimagen.gif" /></td>
						<td>Start Here</td>
						<td>Volume 19</td>
					</tr>
				</table>
<?php require 'main/footer.php' ?>

 

series.php

<?php require 'main/header.php';

$seriesid = $_GET['seriesid'];

$query  = "SELECT id, title, description, price FROM series WHERE id='$seriesid'";
$result = mysql_query($query);

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
    echo "<h1>Subscribe to {$row['title']}</h1>" . 
         "{$row['description']}" . 
         "<p>Price per volume: {$row['price']} (includes Free First Class Shipping)";
}

echo "<table>";

$query2  = "SELECT series.id AS `sid`, series.title AS `stitle`, volumes.id AS `vid`, volumes.seriesid AS `sid2`, volumes.title AS `vtitle`, volumes.volume AS `volume` FROM series, volumes WHERE volumes.seriesid = '$seriesid' AND series.id = volumes.seriesid";
$result2 = mysql_query($query2);

while($row = mysql_fetch_array($result2, MYSQL_ASSOC))
{
    echo "<tr><td><img class='number' src='images/tsubasa/{$row['volume']}n.gif' /></td><td><a href='volume.php?volumeid={$row['vid']}' class='vlinks'>Start Here</a></td><td>{$row['vtitle']}</td></tr>";
}

echo "</table>";

require 'main/footer.php'; ?>

 

style1.css

/****** Main ******/

* {
padding: 0;
margin: 0;
border: 0;
}

body {
text-align: center;
background-image: url(../images/bgblock.gif)
}

#wrapper {
margin-left: auto;
margin-right: auto;
width: 800px;
height: 500px;
text-align: left;
background-color: #000000;
margin-top: 15px;
border: solid 1px #FFFFFF;
}

#navbar {
height: 19px;
width: 666px;
background-color: #D9A33B;
float: right;
padding-top: 4px;
}

#navbar a {
color: #000000;
margin-right: 20px;
font-weight: bold;
}

#logo {
float: left;
height: 72px;
width: 134px;
background-image: url(../images/yukosubscribe.png);
}

#slogan {
height: 25px;
width: 270px;
background-color: #B45D5A;
clear: right;
float: left;
}

#slogantext {
font: 12px;
color: #000000;
font-weight: bold;
padding: 5px 0px 0px 40px;
}

#freeship {
float: right;
padding-right: 200px;
width: 131px;
height: 49px;
background: url(../images/freeship.gif) no-repeat;
}

#lsidebar {
height: 418px;
width: 131px;
background: url(../images/sidebar2.gif) no-repeat right #96854F;
clear: left;
float: left;
color: #000000;
padding: 10px 0 0 10px;
}

#content {
padding-left: 20px;
width: 450px;
float: left;
}

#rsidebar {
height: 103px;
width: 178px;
float: right;
background: url(../images/yuko.png) no-repeat;
position: relative;
bottom: 45px;
padding-top: 240px;
}

#footer {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: right;
}

td {
padding-left: 20px;
}

.rows {
padding-left: 0;
}

.rightc {
padding-left: 50px;
}

/****** Special ******/

#tsubasab, #bothb, #holicb {
text-align: center;
margin: 20px 10px;
float: left;
}

#other, #submit {
border: solid 2px #D9A33B;
}

#submit {
float: right;
background-color: #EFEFEF;
margin: 7px 24px 0 0;
padding: 0px;
color: #8A8573;
font-size: 12px;
}

.number {
width: 20px;
height 20px;
}

.vlinks {
color: #96854F;
}

input {
font-size: 12px;
padding: 0;
}

.itext {
padding-bottom: 1px;
}

/****** Fonts ******/

body {
font: 12px 'Century Gothic';
color: #FFFFFF;
}

h1 {
font-size: 14px;
font-weight: bold;
color: #B45D5A;
}

h2 {
font-size: 14px;
font-weight: bold;
color: #B45D5A;
}

h3 {
font-weight: bold;
color: #D9A33B;
}

h4 {
font-weight: bold;
}

p {
color: #FFFFFF;
padding-bottom: 10px;
}

#rsidebar p {
padding-bottom: 2px;
}

a {
text-decoration: none;
}

a:hover, #navbar a:hover {
color: #B45D5A;
}

.link {
color: #000000;
}

.text {
width: 150px;
}

 

 

[Catfish]

the way i have done something like this is the following:

 

where ever the loop is in your scripts that outputs the list of volumes on your original page (series.php, line , add an additional variable that increments by 1 per loop. Each time it loops I would divide that variables value by 2 and then use a preg_match to see if it has a decimal place in the value returned by the value division. If it has a decimal, it is an odd loop (1, 3, 5 etc) if it has no decimal it is an even loop (2, 4, 6 etc). Every even loop you want to output a table column (<td>) and close the table row and start a new one (<tr></tr>. Every odd loop you just want to output a table column (<td>).

 

 

That's how I would do it but there probably an easier way.

[prnoct90]

Thanks for the reply, but I'm not that knowledgeable in php, so I don't quite understand what you saying, a code example would be nice, if possible. thanks!

[Catfish]

print("<table>");
$counter = 0;
while ($row = mysql_fetch_assoc($results))
{
$counter++;
if (preg_match('/\./', ($counter / 2)) // checks to see if this is an odd or even looping - if this is true, its time for a new row in the HTML table
print("<td>$row['blah']</td></tr>");
else // otherwise it is the first column of the row
print("<tr><td>$row['blah']</td>");
}
print("</table>\n\n");

[prnoct90]

Well, it actually needs to be a for column table with the first and third column having a specific class. Thank!