用于布局的表，需要转换为CSS吗？

Question

我已经建立了一个包含大量页面并使用过表格的网站，因为我不熟悉编码，而且它们很容易使用。我使用Chrome来完成我的所有测试和工作，但我最近发现Internet Explorer没有显示某些表格元素，如边框颜色，而我的表格几乎不适用于Firefox。

我的问题是我的整个网站都是使用表格进行布局的，下面的一个具体示例使用表格是正确的，但这只是一个示例，说明我如何对表格进行编码。

我一直在看CSS好几个小时，尝试各种教程/指南，但我无法理解它，每当我遇到某些事情发生时我必须从头开始。

是的，抓住我之前放的东西。这是2个截图。看起来不错的是Google Chrome，另一个是Firefox：

现在这里是代码：

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

现在我需要的是它看起来像在Chrome上，但在每个浏览器上:)无论是通过CSS，表格我不关心，只要它有效，你们会推荐方法

编辑 - 不知道怎么做但我掌握了它，现在正在使用下面的代码：）

<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

如果要使用div，则需要指定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>

然后你必须指定类：

.head
{
    width: 33%;
    display: inline-block;
    color: orange;
    font-weight: bold;
}

.cont
{
    width: 33%;
    display: inline-block;
    color: white;
}

Answer 2

你的CSS：

.text
{
  style="color:white; 
  font-size: 0.8em";
}

.tablehead
{
  color: orange;
  font-weight: bold;
}
.teabledata
{
  color: white;
}

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

希望这能回答你的问题...