给你写了一个案例，除了合并单元格，没有用到任何表格样式，没有添加任何class，充分利用了选择器达到效果，你复制去试试就懂了
以下是HTML代码
<table><tr>
<td rowspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
下面是css代码
table{
width: 500px
height: 500px
border: 4px solid #fff
}
table td{
background: #4f544e
border: 2px solid #fff
}
table tr:first-child td,
table tr:last-child td,
table tr:nth-child(even) td:last-child{
width: 100px
height: 100px
background: red
}
CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。定义内部样式块对象 你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 定义方式请参阅样式表语法。示例如下： <html><head><title>文档标题</title><style type="text/css"><!-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"font-weight: boldcolor: maroon} h2 {font: 13pt/15pt "Arial"font-weight: boldcolor: blue} p {font: 10pt/12pt "Arial"color: black} --></style></head><body>请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。 内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： <p style="color: siennamargin-left: 20px">This is a paragraph</p>导入样式（Import Styles） 与链入外部样式的功能基本相同，只是语法和实现方式上有差别 <head><title>文档标题</title><style>@import url(css.css)@import url("csss.css") //单引号也可以 @import css,css@import "css.css"//单引号也可以 </style></head>以上几种形式都可以。网页模板素材下载：http://sc.chinaz.com/moban/cssmoban.html
www.dedecms.com/template/
找个合适的随便修改下就可以了。都是免费的~~亲
