表格的单元格合并

关于表格的基础

之前在我CSDN博客中写过一篇关于表格的详细语法。http://blog.csdn.net/wen_special/article/details/53262092
所以在这里我就主要的写一些当初没有总结到的东西。最主要的就是单元格合并。简单的来说:所谓的单元格的合并其实就是一行或者一列占了这个表格的多少行多少列

<td:rowspan='2'>表示占了这个地方占了两行
<td:colspan = '2'>表示这个地方占了两列

附第一次作业代码:购物车

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE1 {font-size: 14px}
-->
</style>
</head>

<body>
<h1 align="center">购物车</h1>
<table width="250" height="168" border="1" align="center" cellpadding="1" cellspacing="1">
  <tr>
    <td width="34" rowspan="2" align="center" valign="middle"><span class="STYLE1"></span>名称</td>
    <td colspan="3" align="center" valign="middle"><span class="STYLE1"></span>2016-11-22<span class="STYLE1"></span><span class="STYLE1"></span></td>
    <td width="61" rowspan="2" align="center" valign="middle"><span class="STYLE1"></span>小计<span class="STYLE1"></span></td>
  </tr>
  <tr>
    <td width="59" align="center" valign="middle">总价</td>
    <td colspan="2" align="center" valign="middle"><span class="STYLE1"></span>单价<span class="STYLE1"></span></td>
  </tr>
  <tr>
    <td align="center" valign="middle"><span class="STYLE1"></span>苹果</td>
    <td align="center" valign="middle"><span class="STYLE1"></span>3公斤</td>
    <td colspan="2" align="center" valign="middle"><span class="STYLE1"></span>5元/公斤<span class="STYLE1"></span></td>
    <td align="center" valign="middle"><span class="STYLE1"></span>15元</td>
  </tr>
  <tr>
    <td align="center" valign="middle"><span class="STYLE1"></span>香蕉</td>
    <td align="center" valign="middle"><span class="STYLE1"></span>2公斤</td>
    <td colspan="2" align="center" valign="middle"><span class="STYLE1"></span>6元/公斤<span class="STYLE1"></span></td>
    <td align="center" valign="middle"><span class="STYLE1"></span>12元</td>
  </tr>
  <tr>
    <td colspan="4" align="center" valign="middle"><span class="STYLE1"></span>总价<span class="STYLE1"></span><span class="STYLE1"></span><span class="STYLE1"></span></td>
    <td align="center" valign="middle"><span class="STYLE1"></span>27元</td>
  </tr>
</table>
</body>
</html>

购物车
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容