Question

只用CSS 和html 建一个如下的表格如何做？

我想做一个表格显示如下：

这种能用表格做吗？或者有什么更好的办法只用css和html

Answer 1

<style type="text/css">
.div1{border:1px solid #dedede; width:600px; height:200px; margin:0px auto;}
.left{width:299px; height:100%; border-right:1px solid #dedede; float:left; display:inline;}
.left{width:300px; height:100%; float:left; display:inline;}
.left1{width:100%; height:100px; float:left; display:inline; margin-top:10px;}
.left1 img{margin-left:10px;}
.left1 p{margin:0px; padding:0px;}
.left1 img,.left1 div{float:left; display:inline;}
</style>
<div class="div1">
<div class="left">
<div class="left1"><img src="" width="75px" height="75px" /><div><p>aaaaaaaa</p><p>谁谁谁</p></div></div>
<div class="left1"><img src="" width="75px" height="75px" /><div><p>aaaaaaaa</p><p>谁谁谁</p></div></div>
</div>

<div class="right">
<h1>654564646</h1>
</div>
</div>
剩下的自己再调调吧

Answer 2

<style type="text/css">
*.mytable td{border:1px solid #5f5e5b;}
</style>

<table class="mytable" style=" border-collapse: collapse;border: 2px solid #9c5e1b; table-layout:fixed">

<tr><td><img src="你的图片路径" /> Alloy Rear Wheel<br/>2 x $139</td><td rowspan="2" style="font-
size:2.5em;"> $347.00</td></tr>

<tr><td><img src="你的图片路径" /> Diva Get Flow saddle<br/> 1 x $69</td></tr>

</table>

追问

怎么能使产品名在上面而价格在下面？

追答

*.mytable td{border:1px solid #5f5e5b;}
*.tdSpanL { float:left;}
*.tdSpanR { float:right;}

Alloy Rear Wheel2 x $139 $347.00

Diva Get Flow saddle 1 x $69

Answer 3

1.colspan="2"是指将2列合并，合并之后要把合并的那个单元格删除掉，才能体现出效果
2.rowspan="2"表格的单元格向下跨一行, 相当于Excel里的当前单元格与下一行同列的单元格"合并单元格"的效果是TD标签的一个属性.

=========表格的合并根据这两个原则就好了

<table width="500" border="1">
	<tr>
		<td>td内容</td>
		<td>td内容</td>
		<td>td内容</td>
		<td>td内容</td>
	</tr>
	<tr>
		<td>td内容</td>
		<td>td内容</td>
		<td>td内容</td>
		<td>td内容</td>
	</tr>
	<tr>
		<td>td内容</td>
		<td>td内容</td>
		<td>td内容</td>
		<td>td内容</td>
	</tr>
</table>

Answer 4

<table border="0">
    <tr>
        <td></td><!--若干个列-->
    </tr><!--若干个行-->
</table><!--表格结束标签-->

有没有图片啊？我先简单做

Answer 5

用div吧