HTML CSS PHP, 表格设计答案

【问题标题】：HTML CSS PHP, Table designHTML CSS PHP, 表格设计
【发布时间】：2017-03-08 15:27:20
【问题描述】：

我在网站上创建像这张图片这样的表格时遇到问题，谁能帮我解决这个问题？图片中的蓝线。我只是不知道如何创建像这张图片这样的表格。特别是参考号，它有自定义边框线。 Here is table design

你也可以在这里查看我的代码MY CODE

这是我的代码

 <html xmlns="http://www.w3.org/1999/ifxhtml">
    <head profile="http://www.w3.org/2005/10/profile">

        <title>Glisten - A free web template</title>



    </head>
    <body>



<table width="800" border="1" align="center">
<tbody>
  <tr>
    <td colspan="2" align="center" bgcolor=""><table width="800" border="1" align="center">
      <tbody>

        <tr>
          <td width="125">Reference No</td>
          <td colspan="4">&nbsp;</td>
          <td colspan="2" bgcolor="#8B8A8A" align="center"></td>
        </tr>
        <tr>
          <td align="center" bgcolor="#FF0004"><strong>NG TINEM</strong></td>
        </tr>
        <tr>
          <td>Site ID</td>
          <td colspan="3" align="center"></td>
          <td width="185">BSC Name</td>
          <td colspan="2" align="center"></td>
        </tr>
        <tr>
          <td>Site Name</td>
          <td colspan="3" align="center"></td>
          <td>New Site ID</td>
          <td colspan="2" align="center"></td>
        </tr>
        <tr>
          <td>Sales Cluster</td>
          <td colspan="3" align="center"></td>
          <td>LAC</td>
          <td colspan="2" align="center"></td>
        </tr>
        <tr>
          <td>Ne Type</td>
          <td colspan="3" align="center"></td>
          <td>Config</td>
          <td colspan="2" align="center"></td>
        </tr>
        <tr>
          <td>Band</td>
          <td colspan="3" align="center"></td>
          <td>PO Number</td>
          <td colspan="2" align="center"></td>
        </tr>
        <tr>
          <td>Cell ID</td>
          <td width="80" align="center"></td>
          <td width="82" align="center"></td>
          <td width="80" align="center"></td>
          <td>&nbsp;</td>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="7" >&nbsp;</td>
        </tr>
        <tr>
          <td align="center">Integration Date</td>
          <td align="center"></td>
          <td align="center">On Air Date</td>
          <td align="center"></td>
          <td align="center">Acceptance Date</td>
          <td colspan="2" align="center"></td>
        </tr>
        <tr>

</tbody>
</table>
    </body></html>

【问题讨论】：

你必须先写出更好的代码
width="800" border="12" align="center" 都是表示属性，在 HTML4 中已被弃用，更不用说 HTML5。您应该使用 CSS。
您有指向该网页所在位置的链接吗？您可以尝试在 Chrome 中使用“Ctrl-U”或“F12”查看它的源代码。

标签： php html css mysql

【解决方案1】：

首先确定要创建的总列。然后使用表的属性，如“colspan”来跨越列。

【讨论】：

【解决方案2】：

在您的表格中添加以下样式（我在您的第二个表格标签中添加了 table 类）：

<style type="text/css">
  .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th
  {
        padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
}
</style>


<table width="800" align="center">
<tbody>
  <tr>
    <td colspan="2" align="center" bgcolor=""><table class="table" width="800" border="1" align="center">
      <tbody>
        <?php
    while($data = mysql_fetch_array($query)){ 
        if($data['dt_report']=='Yes'){
            $check_dt_report='checked="checked"';
        }
        else{
            $check_dt_report='';
        }if($data['kpi_stats']=='Yes'){
            $check_kpi_stats='checked="checked"';
        }
        else{
            $check_kpi_stats='';
        }
        if($data['clear_alarm']=='Yes'){
            $check_clear_alarm='checked="checked"';
        }
        else{
            $check_clear_alarm='';
        }
        if($data['configuration']=='Yes'){
            $check_configuration='checked="checked"';
        }
        else{
            $check_configuration='';
        }
        if($data['neighbor']=='Yes'){
            $check_neighbor='checked="checked"';
        }
        else{
            $check_neighbor='';
        }
      ?>
        <tr>
          <td width="125">Reference No</td>
          <td colspan="4">&nbsp;</td>
          <td colspan="2" bgcolor="#8B8A8A" align="center"><?php echo $data['no_ref']; ?></td>
        </tr>
        <tr>
          <td align="center" bgcolor="#FF0004"><strong>NG TINEM</strong></td>
        </tr>
        <tr>
          <td>Site ID</td>
          <td colspan="3" align="center"><?php echo $data['site_id']; ?></td>
          <td width="185">BSC Name</td>
          <td colspan="2" align="center"><?php echo $data['bsc_name']; ?></td>
        </tr>
        <tr>
          <td>Site Name</td>
          <td colspan="3" align="center"><?php echo $data['site_name']; ?></td>
          <td>New Site ID</td>
          <td colspan="2" align="center"><?php echo $data['new_site_id']; ?></td>
        </tr>
        <tr>
          <td>Sales Cluster</td>
          <td colspan="3" align="center"><?php echo $data['sales_cluster']; ?></td>
          <td>LAC</td>
          <td colspan="2" align="center"><?php echo $data['lac']; ?></td>
        </tr>
        <tr>
          <td>Ne Type</td>
          <td colspan="3" align="center"><?php echo $data['ne_type']; ?></td>
          <td>Config</td>
          <td colspan="2" align="center"><?php echo $data['config']; ?></td>
        </tr>
        <tr>
          <td>Band</td>
          <td colspan="3" align="center"><?php echo $data['band']; ?></td>
          <td>PO Number</td>
          <td colspan="2" align="center"><?php echo $data['po_number']; ?></td>
        </tr>
        <tr>
          <td>Cell ID</td>
          <td width="80" align="center"><?php echo $data['cell_id1']; ?></td>
          <td width="82" align="center"><?php echo $data['cell_id2']; ?></td>
          <td width="80" align="center"><?php echo $data['cell_id3']; ?></td>
          <td>&nbsp;</td>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="7" >&nbsp;</td>
        </tr>
       </tbody>
</table>

【讨论】：