Used tables for layout, need to convert to CSS? - html

Question

I've built a site with tons of pages and have used tables because I am new to coding and they're easy to use. I used Chrome to do all of my testing and stuff but I've recently found that Internet Explorer doesn't show certain table elements like border colours and my tables barely work at all with Firefox.
My PROBLEM is that my entire site is laid out using tables, this one specific example below is correct to use a table yes but it's just an example to show how I code my tables.
I've been looking at CSS for hours now, trying various tutorials/guides but I can't get my head around it, every time I get somewhere something happens and I have to start from scratch.
Right, scratch what I put before. Here's 2 screenshots. The one that looks fine is Google Chrome, the other is Firefox:
Now here's the code:
<style>
table.fix{
table-layout: fixed;
font-size: 90%;
}
</style>
<table BORDERCOLOR="grey" style="width: 60%;" align="left" class="fix">
<tr>
<td><?php echo "<b>Subject: ",$subject,"</b>"; ?></td>
</tr>
</table>
<table BORDERCOLOR="grey" style="width: 40%;" align="right" class="fix">
<tr>
<td><?php echo $datesent; ?></td>
</tr>
</table>
<table BORDERCOLOR="grey" style="width: 100%;"class="fix">
<tr>
<td><?php echo $message; ?></td>
</tr>
</table>
<table BORDERCOLOR="grey" align="left" class="fix">
<tr>
<td><?php echo "From: <a href='viewprofile.php?userid=$fromuser'>",$id2," </a>"; ?></td>
</tr>
</table>
<table class="fix">
<tr>
<td><input type='submit' name='reply' value='Reply' onclick="location.href='sendmail.php?user=<?php echo $fromuser; ?>&subject2=<?php echo $subject; ?>&replyto=<?php echo $id; ?>'"></td>
</tr>
</table>
Now all I need is it to look like it does on Chrome but on every browser :) Whether it's through CSS, tables whatever I don't care, as long as it works and you guys would recommend the method
EDIT- Don't know how but I got the hang of it, it's now working with the code below :)
<style>
table.fix{
table-layout: fixed;
font-size: 90%;
}
.template{
border-style: solid;
border-color: grey;
height: 25px;
}
.left {
float: left;
}
.right {
float: right;
}
.box{
width: 530px;
height: 150px;
border-style: solid;
border-color: grey;
font-size: 90%;
}
.namebox{
border-style: solid;
border-color: grey;
}
<div style="width: 300px;" class="template left"><?php echo "<b>Subject: ",$subject,"</b>"; ?></div>
<div style="width: 223px;" class="template right"><?php echo $datesent; ?></div>
<div class="box"><?php echo $message; ?></div>
<div class="namebox"><?php echo "From: <a href='viewprofile.php?userid=$fromuser'>",$id2,"</a>"; ?></div>
<br /><center><input type='submit' name='reply' value='Reply' onclick="location.href='sendmail.php?user=<?php echo $fromuser; ?>&subject2=<?php echo $subject; ?>&replyto=<?php echo $id; ?>'" /></center>

Answer 1

If you want to use divs, you need to specify the class of a div.
<div>
<div>
<div class="head">Cost Per Shard</div>
<div class="head">Use</div>
<div class="head">How many shards?</div>
</div>
<div>
<div class="cont">1000 Gems</div>
<div class="cont">VIP Resource</div>
<div class="cont"><input type="text" name="gems2" /></div>
</div>
<div>
<div class="cont"></div>
<div class="cont"></div>
<div class="cont"><input type="submit" name="Trade2" value="Trade"/></div>
</div>
Then you must specify the classes:
.head
{
width: 33%;
display: inline-block;
color: orange;
font-weight: bold;
}
.cont
{
width: 33%;
display: inline-block;
color: white;
}

Answer 2

your CSS:
.text
{
style="color:white;
font-size: 0.8em";
}
.tablehead
{
color: orange;
font-weight: bold;
}
.teabledata
{
color: white;
}
your HTML
<form action="gemshop.php" method="post">
<table cellpadding="5" cellspacing="5">
<p class="text">Buy Shards</p>
<tr>
<td class="tablehead">Cost Per Shard</td>
<td class="tablehead">Use</td>
<td class="tablehead">How many shards?</td>
</tr>
<tr>
<td class="tablehead">1000 Gems</td>
<td class="tablehead">VIP Resource</td>
<td><input type="text" name="gems2" /></td>
</tr>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="Trade2" value="Trade"/></td>
</tr>
Hopes this answers your question...