首页  >  文章  >  web前端  >  html怎么做表格

html怎么做表格

藏色散人
藏色散人原创
2021-03-31 10:51:5360413浏览

html做表格的方法:首先新建一个html,并在“”中间填入表格内容;然后在“”中间输入样式表的样式;最后设置单元格的宽度高度等等样式即可。

html怎么做表格

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

html做个表格的步骤如下:

1、首先新建一个html,点击6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956中间,先填入表格内容;

9ee54eb505fa75c5c9c052ae6893d5d.png

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>

461dd38a3a3a5c3d3fe633ab28282d2.png

3、然后在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1中间输入样式表的样式;

9eebcb44b5213912c83570b1cf48a9a.png

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>

6db0b8ec0d447a02cb346394b5d1994.png

5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框,将相邻变合并。

4f933903d5109d53dc603b350a509b8.png

6、预览结果如下所示,一个简单的表格就制作出来了。

162fa3ec07b578d9c866547dc03dfab.png

推荐学习:《HTML视频教程》《css视频教程

以上是html怎么做表格的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn