html创建表格的方法：首先使用“f5d188ed2c074f8b944552db028f98a1” 标签定义表格框架；然后使用一个或多个“a34de1251f0d9fe1e645927f19a896e8”标签定义表格中的行，一个或多个“b6c5a531a458a2e790c1fd6421739d1c”标签定义单元格；最后在td标签对中填入表格数据（单元格内容）即可，数据可以是文本、图片等信息。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
表格由 f5d188ed2c074f8b944552db028f98a1 标签来定义。
每个表格均有若干行（由 a34de1251f0d9fe1e645927f19a896e8 标签定义），每行被分割为若干单元格（由 b6c5a531a458a2e790c1fd6421739d1c 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
border属性指定有无边框，不写border属性或者赋值为0，创建的表格都将没有边框;赋值的大小决定了边框的粗细。
th属性设置表头，如果不把表头特殊设置，那么显示出来的表头会和内容一样的格式。
下面通过代码示例来给大家一步步介绍：
1、下面写两个简单的没有边框的表格
<h5>第一个表格</h5> <table border=0> <!------------把border赋值为0，这个表格没有边框--> <tr> <th>name</th> <!-------------------利用 <th>将这个值设置为表头--> <th>sex</th> <!-------------------利用 <th>将这个值设置为表头--> </tr> <!-----------------------------------这是第一行--> <tr> <td>张三</td> <td>女</td> </tr> </table> <!----------------------------------这是第二行-->
<h5>第二个表格</h5> <table> <!------------不写border这个属性，这个表格也没有边框--> <tr> <th>name</th> <!-------------------利用 <th>将这个值设置为表头--> <th>sex</th> <!-------------------利用 <th>将这个值设置为表头--> </tr> <!-----------------------------------上面这是第一行<tr>--> <tr> <td>张三</td> <td>女</td> </tr> <!------------------------------第二行--> </table>
效果：
2、写一个有边框的表格（border的赋值决定了边框的粗细）
给表格设置标题，用<caption>。
假如表格中有空值，那么在这个单元格里插入一个空格占位符“ ，可以让单元格保持完整。
<h5>第三个表格</h5> <caption>人员信息表</caption> <!---------------------给表格设置一个标题--> <table border=1> <!---------------------border=1,表格有边框--> <tr> <th>name</th> <th>sex</th> </tr> <tr> <td>张三</td> <td>女</td> </tr> <tr> <td> </td> <!----------------这个单元格没有值，放一个空格占位符 在这里--> <td>unknown</td> </tr> </table>
效果：
3、下面设置一个横向跨列和一个纵向跨行的表格
某一个单元格横跨两列，使用 colspan=2来设置，数字代表跨的列
<table border=1> <tr> <th>姓名</th> <th colspan=3>成绩</th> <!-------------横向跨列，3表示跨了3列--> </tr> <tr> <td>张丹</td> <!--------------这是第一列---姓名--> <td>98</td> <!--------------这是第二列---成绩1--> <td>56</td> <!----------------这是第三列---成绩2--> <td>87</td> <!--------------这是第四列---成绩3--> </tr> </table>
效果：
某一个单元格纵跨两行，使用 rowspan=2来设置，数字代表跨的行
<table border=1> <tr> <th>姓名</th> <th colspan=3>成绩</th> <!-------------横向跨列，3表示跨了3列--> </tr> <tr> <td>张丹</td> <!--------------这是第一列---姓名--> <td>98</td> <!--------------这是第二列---成绩1--> <td>56</td> <!----------------这是第三列---成绩2--> <td>87</td> <!--------------这是第四列---成绩3--> </tr> </table>
效果：
4、HTML的各项标签可以随意嵌套。
4.1在单元格里嵌套列表
<table border=2> <tr> <td>房间里包含的水果 <li>香蕉</li> <li>葡萄</li> <li>番茄</li> </td> </tr> </table>
效果：
4.2在单元格里嵌套单元格
<table border=2> <tr> <td> <p>我要做的事</p> //------------------------- <table border=1> <tr> <th rowspan=3>周一</th> <td>做PPT</td> </tr> <tr> <td>开会</td> </tr> <tr> <td>写报告</td> </tr> </table> //---------------------中间是一个完整的单元格 </td> </tr> </table>
效果：
5、更改表格样式
5.1单元格样式之—-单元格边距，保证内容与边框的距离
<table border=2 cellpadding=10> //----------使用cellpadding来设置单元格边距 <tr> <td> <p>我要做的事</p> <table border=1 cellpadding=5> //----------使用cellpadding来设置单元格边距 <tr> <th rowspan=3>周一</th> <td>做PPT</td> </tr> <tr> <td>开会</td> </tr> <tr> <td>写报告</td> </tr> </table> </td> </tr> </table>
效果：
5.2单元格样式之—-给表格添加背景颜色或图片（颜色用bgcolor；图片用background）
<table border=2 cellpadding=10 bgcolor=yellow> <!----------使用bgcolor来设置背景颜色为黄色--> <tr> <td> <p>我要做的事</p> <table border=1 cellpadding=5 background=http://images.missyuan.com/attachments /day_080420/20080420_ba6f1b3324576143d62brfIPM291T4da.jpg> <!---------使用background来设置背景图片--> <tr> <th rowspan=3>周一</th> <td>做PPT</td> </tr> <tr> <td>开会</td> </tr> <tr> <td>写报告</td> </tr> </table> </td> </tr> </table>
效果：
5.3给某一个单元格单独设置背景
<table border=2 cellpadding=10 bgcolor=yellow> <!----------使用bgcolor来设置表格背景颜色为黄色-->
<tr>
<td>
<p>我要做的事</p>
<table border=1 cellpadding=5>
<tr>
<th bgcolor=white rowspan=3>周一</th> <!--给标题这一个单元格设置背景颜色-->
<td>做PPT</td>
</tr>
<tr>
<td>开会</td>
</tr>
<tr>
<td background=http://images.missyuan.com/attachments
/day_080420/20080420_ba6f1b3324576143d62brfIPM291T4da.jpg>写报告</td>
<!---------使用background来设置单元格背景图片-->
</tr>
</table>
</td>
</tr>
</table>
效果：
5.4在表格中排列内容–让表格更好看(align)
<table width=400 border=1> <tr> <th align=left>电表名称</th> <th align=center>Ua(V)</th> <th align=center>Ub(V)</th> <th align=center>Uc(V)</th> </tr> <tr> <td align=left>2018-6-19 00:00</td> <td align=right>232.2</td> <td align=right>239.0</td> <td align=right>231.8</td> </tr> <tr> <td align=left>2018-6-19 05:00</td> <td align=right>232.6</td> <td align=right>233.2</td> <td align=right>234.3</td> </tr> <tr> <td align=left>2018-6-19 10:00</td> <td align=right>232.6</td> <td align=right>232.2</td> <td align=right>234.6</td> </tr> </table>
效果：
上面这些功能，可以根据实际情况随意嵌套，如同搭积木一样，大家可以根据自己喜好利用这些功能写出炫酷的表格！
推荐教程：《html视频教程》
以上就是html怎么创建表格的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » html怎么创建表格
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
