html做个表格的步骤如下：
1、首先新建一个html，点击<body></body>中间，先填入表格内容；
2、内容根据需求来写即可，示例代码如下：
<table>
<p style="text-align:center ">功课表</p>
<tr>
<th>语文</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
<tr>
<th>数学</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
<tr>
<th>英文</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
</table>
3、然后在<head></head>中间输入样式表的样式；
4、样式也根据个人的需求来设置即可，设置单元格的宽度高度，合并单元格，位置，颜色等等，示例代码如下：
<style type="text/css">
body
{
width:340px
height :800px
}
table
{
border-collapse :collapse
}
th,td
{
width:100px
height:40px
border :1px solid black
font-size:12px
text-align :center
}
</style>
5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框，将相邻变合并。
6、预览结果如下所示，一个简单的表格就制作出来了。
自学自强，不懂就问，但不能太依赖对方哦，有时自己解决问题才是真正学到东西的，^.^
不废话，css代码：
<style>.Gavin_Design ,.gd div{margin:0 auto overflow:hidden height:auto background-color:transparent color:#333}
.gd{width:1000px}
.gd input ,.gd textarea{margin:0 padding:0 background:none border:none font-size:14px resize:none outline:0}
.gd .part{padding:15px 0}
.gd .textarea{height:90px border:1px solid #ddd -webkit-box-shadow:inset 0 3px 2px rgba(0,0,0,.05) -moz-box-shadow:inset 0 3px 2px rgba(0,0,0,.05) box-shadow:inset 0 3px 2px rgba(0,0,0,.05) background:#fff padding:10px}
.gd .textarea textarea{width:100% height:90px overflow:hidden overflow-y:auto}
.gd .bottom_contorl{margin-top:15px}
.gd .bottom_contorl .express{float:left height:32px line-height:32px padding-left:10px}
.gd .bottom_contorl .button{float:right width:320px height:32px text-align:center font-size:0}
.bottom_contorl .button input{height:32px width:150px margin-left:10px color:#fff cursor:pointer}
.bottom_contorl .button input.submit{background:#4779be}
.bottom_contorl .button input.submit:active{background:#3c6eb4}
.bottom_contorl .button input.cancel{background:#b5b5b5}
.bottom_contorl .button input.cancel:active{background:#a9a9a9}
.gd .part .init{width:100% border-collapse:collapse color:#333}
.gd .part td{border-bottom:1px solid #e5e5e5 height:60px padding:2% vertical-align:middle}
.gd .part .user{overflow:hidden white-space:nowrap text-overflow:ellipsis font-size:12px width:60px}
.gd .part .me{color:#666}
.gd .part .reply{color:#22627d}
.gd .part .comments{font-size:14px}
</style>
html结构代码（div+css）：
<div class="Gavin_Design gd"><div class="part">
<div class="textarea">
<textarea placeholder="你有什么好的建议请留言"></textarea>
</div>
<div class="bottom_contorl">
<div class="express">表情</div>
<div class="button">
<input type="button" class="submit" value="提交">
<input type="button" class="cancel" value="取消">
</div>
</div>
</div>
<div class="part">
<table cellpadding="0" cellspacing="0" class="init">
<tr>
<td width="10%"><div class="user me">我</div></td>
<td width="90%" class="comments">老师你好，周末快乐！</td>
</tr>
<tr>
<td><div class="user reply">秋叶，很长的名字</div></td>
<td class="comments">下午好，秋荷！</td>
</tr>
<tr>
<td width="10%"><div class="user me">我</div></td>
<td width="90%" class="comments">好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字。</td>
</tr>
<tr>
<td><div class="user reply">秋叶，很长的名字</div></td>
<td class="comments"><b>亲爱的。。。好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字</b></td>
</tr>
</table>
</div>
</div>
希望能帮助到你^.^
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）