我有一个问题要在网站上创建像这样的表格,任何人可以帮助我解决这个问题吗?图片中的蓝线。我只是不知道如何像这样的图像创建表。特别是参考号,它具有自定义边框线。这是表设计
您也可以在这里检查我的代码
这是我的代码
<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"> </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> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="7" > </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>
首先确定要创建的总列。然后使用表格" colspan"的属性跨越列。
在您的表中添加以下样式(我在第二个表标签中添加了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"> </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> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="7" > </td>
</tr>
</tbody>
</table>