2013-04-02 65 views
0

我试图重新东西接近这个表:如何摆脱表中的colspan/rowspan单元格中的行?

http://i49.tinypic.com/2q2qwxl.png

我越来越怪异的线路,不过,与我已经约试图做到这一点的方式。我如何摆脱它们?或者有人能告诉我实现上述表格中最简单的方法吗?这里是我的代码:

<!DOCTYPE html> 
<html> 
<head> 
<title>Assignment #4</title> 
<style> 

table 
    { 
font-family:"Courier New", Arial, Helvetica, sans-serif; 
border-collapse:collapse; 
margin: auto; 
border-bottom-style: double; border-top-style: double; 

    } 



table.border tr {border: 1px solid black; border-left: 0px solid; 
    border-right: 0px  solid;} 

th 
    { 
font-size:18px; 
font-style: bold; 
padding-top:2px; 
padding-bottom:2px; 
background-color:lightblue; 
color:#000000; 


    } 



    tr.white td 
    { 
color:#000000; 
background-color: #ffffff; 
    } 

td,th 
    { 
font-size:1em; 
padding:3px 7px 2px 7px; 
text-align: left; 





</style> 
</head> 

<body> 


    <body> 

<h3 style="text-align: center; font-family: courier new;"> 
<strong>Code-page support in microsoft windows</strong></h3> 

<table class="border"> 
<tr> 
    <th>Code-Page ID</th> 
    <th style="border: 1px solid black; text-align: center;">Name</th> 
    <th colspan="2">ACP OEMCP</th> 
</tr 
<div> 
<tr class="white"> 
    <td style="background-color: lightblue;" rowspan="3">1200 
     <br/>1250  
     <br/>1251</td> 

    <td style="border: 1px solid black;" rowspan="3">Unicode 
     <br/>Windows 3.1 Eastern European 

     <br/>Windows 3.1 Cynillic</td> 

    <td rowspan="3"><br/>X <br/>X</td> 

</tr> 

<tr class="white"> 

<td style="border: 1px solid black;"></td> 


</tr> 


<tr class="white"> 

<td style="border: 1px solid black;"></td> 


</tr> 

    </div> 

<div> 
<tr class="white"> 
<td style="background-color: lightblue;" rowspan="3">437 <br/>708 <br/>709</td> 
<td style="border: 1px solid black;" rowspan="3">MS-DOS 
<br/>Arabic (ASMO 708) 
<br/>Arabic (ASMO 449)</td> 
<td><br/></td> 
<td colspan="2">X <br/>X <br/>X</td> 
</tr> 

<tr class="white"> 

<td style="border: 1px solid black;"></td> 

</tr> 

<tr class="white"> 

<td style="border: 1px solid black;"></td> 

</tr> 

</div> 

<div> 
<tr class="white"> 
<td style="background-color: lightblue;">Assignment#4</td> 
<td style="border: 1px solid black;"> 
<a href="http://www.mansfield.edu">Mansfield University</a></td> 
<td colspan="2"><center> 
<img src="http://mansfield.edu/files/images/Facebook.gif"> </center></td> 
</tr> 

</div> 

</table> 




</body> 
</html> 

回答

0

首先将图像样本没有在这里为我工作:(

的所有链接,但如果你指的是垂直线,如线路1 | 2号线是你的问题,你。可以使用列跨度= 2这将导致类似LINE1 LINE2

例:

<tr> 

<td colspan=2></td> <td> </td> </tr>

希望这将有助于,

问候,

Otacon

0

你的代码是一个烂摊子!你把两个“身体”,忘了一些“}”和“>”。 除了问题是“td”是空白的,你把它放在“tr”里面。在这里你的代码:

<!DOCTYPE html> 
<html> 
<head> 
<title>Assignment #4</title> 
<style> 

table { 
font-family:"Courier New", Arial, Helvetica, sans-serif; 
border-collapse:collapse; 
margin: auto; 
border-bottom-style: double; border-top-style: double; 
} 



table.border tr { 
    border: 1px solid black; 
    border-left: 0px solid; 
    border-right: 0px solid; 
} 

th{ 
font-size:18px; 
font-style: bold; 
padding-top:2px; 
padding-bottom:2px; 
background-color:lightblue; 
color:#000000; 
} 

tr.white td { 
    color:#000000; 
    background-color: #ffffff; 
} 

td,th{ 
font-size:1em; 
padding:3px 7px 2px 7px; 
text-align: left; 
} 




</style> 
</head> 

<body> 

<h3 style="text-align: center; font-family: courier new;"> 
<strong>Code-page support in microsoft windows</strong></h3> 

<table class="border"> 
<tr> 
    <th>Code-Page ID</th> 
    <th style="border: 1px solid black; text-align: center;">Name</th> 
    <th colspan="2">ACP OEMCP</th> 
</tr> 
<tr class="white"> 
    <td style="background-color: lightblue;" rowspan="3">1200 
     <br/>1250  
     <br/>1251</td> 

    <td style="border: 1px solid black;" rowspan="3">Unicode 
     <br/>Windows 3.1 Eastern European 

     <br/>Windows 3.1 Cynillic</td> 

    <td rowspan="3"><br/>X <br/>X</td> 

</tr> 

<tr class="white"> 


</tr> 


<tr class="white"> 


</tr> 
<tr class="white"> 
<td style="background-color: lightblue;" rowspan="3">437 <br/>708 <br/>709</td> 
<td style="border: 1px solid black;" rowspan="3">MS-DOS 
<br/>Arabic (ASMO 708) 
<br/>Arabic (ASMO 449)</td> 
<td><br/></td> 
<td colspan="2">X <br/>X <br/>X</td> 
</tr> 

<tr class="white"> 

</tr> 

<tr class="white"> 

</tr> 
<tr class="white"> 
<td style="background-color: lightblue;">Assignment#4</td> 
<td style="border: 1px solid black;"> 
<a href="http://www.mansfield.edu">Mansfield University</a></td> 
<td colspan="2"><center> 
<img src="http://mansfield.edu/files/images/Facebook.gif"> </center></td> 
</tr> 

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

我认为这就是你要找的。 希望这个答案帮助你。

Regards, LGhost