代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>用html+CSS做表格</title>
<style type="text/css">
ul{padding:0
width:324px/*设置表格宽 */
height:42px/*设置表格高*/
margin:30px
border-top:#000 1px solid/*设置表格上边框*/
border-right:#000 1px solid/*设置表格右边框*/
}
li{ border-left:#000 1px solid/*设置表格左边框*/
border-bottom:#000 1px solid/*设置表格下边框*/
/*设置单元格边框*/
list-style:none/*清除项目列表前的标记*/
float:left/*设置单元格浮动，用于水平排列*/
display:block/*设置单元格为块级元素于用语控制大小等*/
width:80px/*设置单元格宽*/
height:20px/*设置单元格高*/
text-align:center/*设置单元格内文本对齐方式*/
}
</style>
</head>
<body>
<!-- 原理就是利用项目列表的每个项目做出表格中的每个单元格，然后通过设置ul和li的边框达到设置表格的边框效果 -->
<ul>
<li>表格1</li>
<li>表格2</li>
<li>表格3</li>
<li>表格4</li>
<li>表格A</li>
<li>表格B</li>
<li>表格C</li>
<li>表格D</li>
</ul>
</body>
</html>
----希望对你有帮助 ----
-------满意采纳奥-----
<html><head>
<meta charset="utf-8">
<title>图文混排</title>
<style>
/*左右排版*/
.clearfix{clear: both}
.column{width: 30%position: absolutebackground-color:blue}
.tukuang{broder:1px black solid}
.tukuang img{float: leftwidth: calc(100% / 2 - 10px)margin:5pxborder-radius: 10%position: relative}
.img{width: 50%position: relativebackground-color:black}
.text{float: rightwidth: calc(50% - 10px)background-color:redposition: absolutetop:5pxright:5px}
</style>
</head>
<body>
<div class="column">
<div class="img">
<div class="tukuang">
<img src="images/m1.jpg">
</div>
<div class="tukuang">
<img src="images/m2.jpg">
</div>
<div class="tukuang">
<img src="images/m3.jpg">
</div>
<div class="tukuang">
<img src="images/m4.jpg">
</div>
</div>
<div class="text">
文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域
文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
/*好久没写生疏了 */
给你个参考
<html>
<head>
<style>
h1{
font-size:40px
text-align:center
}
#page{
width:300px
height:500px
margin:0 auto
}
#header{
border: 1px red dashed
width:100%
height:80px
background: #FDFDFD
}
#content{
border: 1px red dashed
background: #FFFADD
width:100%
height:300px
margin:0 auto
}
#left{
border: 1px red dashed
width:80px
height:100%
float:left
}
#right{
border: 1px red dashed
height:100%
width:200px
float:right
}
#footer{
border-style:dashed
width:100%
height:80px
background: #FDFDFD
border: 1px red dashed
}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>header</h1></div>
<div id="content">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
<div id="footer"><h1>footer</h1></div>
</div>
</body>
</html>
效果如下：你参考着慢慢写吧
