这篇“HTML中表格的知识点示例”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“HTML中表格的知识点示例”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。
1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。 2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。 4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
制作网页时，要合理规划网页布局。比如，在网页中添加一个表格，可分为上、中、下三部分，上部存放网页标题或LOGO图片，中间部分是整个网页的主体内容，底部就是相关制作信息。此外，单元格里还可再添加单元格，将内容分类别、分层次合理规划。
表格标签--table
是一个双标签。一个表格中包含<table>、<tr>、<td>三个基本元素。首标签<table>和尾标签</table>表示一个表格的开始和结束。'tr=table row'用于表示一行的开始和结束,'td=table data'用来表示行中个单元格的开始和结束。
<table> <tr> <td>单元格内容</td> <td>单元格内容</td> </tr> <tr> <td>单元格内容</td> <td>单元格内容</td> </tr> ... </table>
表格的标题--caption
有一种特殊的单元格叫做标题单元格，位于表格的第一行，标题单元格是没有边框的，默认居中显示。
<caption>表格的标题</caption>
表格边框--border
默认情况下，表格不显示边框。为了更好的区分内容，可以设置表格边框宽度大小，
<table border='边框属性'>
表格内文字与边框的距离--cellpadding
默认情况下，文字紧贴边框。通过cellpadding可以调整文字与边框之间的距离
<table cellpadding='文字与边框的距离'>
表格中单元格之间的距离--cellspacing
表格中单元格之间的距离也可以变化。
<table cellspacing='单元格之间的距离'>
单元格背景图像--background
<table background='图片'>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小白</title> </head> <body> <p>默认情况下的表格</p> <table border="2" align="center"> <caption>亚洲</caption> <tr> <td>中国</td> <td>北京</td> <td>1949年10月1日</td> </tr> <tr> <td>缅甸</td> <td>内比都</td> <td>1948年1月4日</td> </tr> </table> <hr/> <p>设置属性后的表格</p> <!--bgcolor：行背景颜色--> <table cellpadding="15" cellspacing="10" border="2" bgcolor="#8fbc8f" align="center"> <caption>亚洲</caption> <tr> <td>中国</td> <td>北京</td> <td>1949年10月1日</td> </tr> <tr> <td>缅甸</td> <td>内比都</td> <td>1948年1月4日</td> </tr> </table> </body> </html>
行合并属性--rowspan
在制作一些复杂的表格时，需要用到单元格合并
<td row='需要合并的行数'>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单元格行合并</title> </head> <body> <table border="1" align="center" width="600" height="300"> <caption>招生简章</caption> <tr> <td rowspan="3">基础科目</td> <td>数学</td> </tr> <tr> <td>外语</td> </tr> <tr> <td>政治</td> </tr> <tr> <td>专业课</td> <td bgcolor="#bc8f8f">100</td> </table> </body> </html>
列合并属性--colspan
在制作一些复杂的表格时，需要用到单元格合并
<td row='需要合并的列数'>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单元格列合并</title> </head> <body> <table border="1" align="center" width="600" height="300" cellpadding="30"> <tr> <td colspan="3" align="center">西安</td> </tr> <tr> <td>长安区</td> <td>雁塔区</td> <td>碑林区</td> </tr> <tr> <td>新城区</td> <td>高新区</td> <td>莲湖区</td> </tr> </table> </body> </html>
表格的嵌套
一个表格内部包含其他标签，用表格来排版页面，可以使页面各个部分互不冲突，整体结构优美。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格嵌套</title> </head> <body> <table bgcolor="#8fbc8f" align="center"> <caption>示例</caption> <tr> <td>昙花</td> <td> <img src="flower_02.jpg" height="300" width="200"> </td> <td> <img src="flower_02.jpg" height="300" width="200"> </td> </tr> <tr> <td>浏览器</td> <td> <a href="http://www.baidu.com" style="color: #f10180">百度</a> </td> <td bgcolor="#bc8f8f"> <table border="1"> <tr> <td>百度贴吧</td> <td>百度网盘</td> <td>百度图库</td> </tr> </table> </td> </tr> </table> </body> </html>
以上是“HTML中表格的知识点示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
