时间：2023-07-25 23:54:01 | 来源：网站运营
时间：2023-07-25 23:54:01 来源：网站运营
用HTML5创建表格：
在线咨询
Dreamweaver来创建热点区域，其实就是一个简单的软件使用而已，了解整个流程就行了。这次介绍如何使用HTML5创建表格。表格在HTML文档中也是一个比较重要的内容，除了可以清晰的显示数据，在早期还被用来进行页面布局和排版，但是在此一定要跟大家重点强调下：十分不不建议使用表格来进行页面布局和排版等相关工作，弊端十分的多，很难进行维护，有时候网页的崩溃就是因为使用了表格来进行页面布局。HTML中的表格类似于Word软件中的表格，如果你使用了像Dreamweaver之类的网页制作软件，基本操作也很相似。但我们这里还是用记事本来进行相关操作，毕竟只有掌握了一门技术的真正内涵才会创造出更方便更实用的东西。表格的基本结构
表格的基本操作
完整的表格标记
<table>、行对象<tr>、单元格对象<td>等。<table>标记用于标记一个表格对象的开始，</table>标记则表示结束。一个表格中，只允许出现一对<table>标记。。<tr>标记用于标识表格一行的开始，</tr>标记则标识结束。表格内有多少对<tr></tr>标记，就表示表格有多少行。<td>标记用于标记表格某行中的一个单元格开始，</td>标记则标识结束。<td></td>标记书写在<tr></tr>标记内，一对<tr></tr>标记内有多少对<td></td>标记，就表示有多少个单元格。在HTML5中有colspan和rowspan两个属性，在表格的基本操作进行详细说明。<table></table>标记，一对或者几对<tr></tr>标记以及一对或者几对<td></td>标记。一对<table></table>标记定义一个表格，一对``标记定义一行，一对```标记定义一个单元格。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表格基本结构</title> 6</head> 7<body> 8<table > 9 <tr>10 <td>A1</td>11 <td>B1</td>12 <td>C1</td>13 <td>D1</td>14 </tr>15 <tr>16 <td>A2</td>17 <td>B2</td>18 <td>C2</td>19 <td>D2</td>20 </tr>21 <tr>22 <td>A3</td>23 <td>B3</td>24 <td>C3</td>25 <td>D3</td>26 </tr> <!--表格基本结构-->27</table>28</body>29</html>在Mozilla Firefox的渲染结果如下：<td>标记中的两个属性就行。colspan属性合并左右两个单元格<td>标记中的colspan属性来完成，格式如下：1<td colspan="数值">单元格内容</td>其中，colspan属性的取值为数值型整数数据，代表几个单元格进行左右合并。rowspan属性合并上下两个单元格<td>标记中的rowspan属性来完成，格式如下：1<td rowspan="数值">单元格内容</td>其中，rowspan属性的取值为数值型整数数据，代表几个单元格进行左右合并。同样也需要注意上述的问题。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表格基本结构</title> 6</head> 7<body> 8<table border="1"> 9 <tr>10 <td colspan="2">A1B1</td> <!--左右合并-->11 <td>C1</td>12 <td>D1</td>13 </tr>14 <tr>15 <td rowspan="2">A2 A3</td> <!--上下合并-->16 <td>B2</td>17 <td>C2</td>18 <td>D2</td>19 </tr>20 <tr>21 <td>B3</td>22 <td>C3</td>23 <td>D3</td>24 </tr> <!--合并单元格-->25</table> 26</body>27</html>其实，我们发现合并单元格就是“丢掉”某些单元格。<thead>、<tbody>、<tfoot>。<caption>表示表格的标题，在一行中除了<td>标记表示一个单元格以外，还可以使用<th>定义表格内的表头单元格。<caption>标记定义了表格标题，<thead>、<tbody>和<tfoot>标记对表格进行了分组。在<thead>部分使用<th>标记代替<td>标记定义单元格，<th>标记定义的单元格默认加粗。<caption>标记必须紧随<table>标记之后。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>创建表格</title> 6<style> 7 tfoot{background-color: #FF3;} 8 </style> 9</head>10<body>11<p>12<table width="200" border="1">13 <tr>14 <td colspan="2"> </td>15 <td> </td>16 <td> </td>17 </tr>18 <tr>19 <td> </td>20 <td> </td>21 <td rowspan="2"> </td>22 <td> </td>23 </tr>24 <tr>25 <td> </td>26 <td> </td>27 <td> </td>28 </tr>29</table>30</p>31 <table >32 <caption>学生成绩单</caption>33 <thead>34 <tr>35 <th>姓名</th><th>性别</th><th>成绩</th>36 </tr>37 </thead>38 <tfoot>39 <tr>40 <td>平均分</td><td colspan="2">540</td>41 </tr>42 </tfoot>43 <tbody>44 <tr>45 <td>张三</td>46 <td>男</td>47 <td>560</td>48 </tr>49 </tbody>50 <tr>51 <td>李四</td>52 <td>男</td>53 <td>520</td>54 </tr>55</table>56</body>57</html>还是希望各位去敲一敲。关键词：表格,创建
