表格由<table>标签来定义,每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
1 html 表格的基本结构：2 &l张煌言t;table>…</table>：定义表格3 <th>…</th>：定义表格的标题栏（文字加粗）4 <tr>…</tr>：定义表格的行5 <td>…</td>：定义表格的列
html 表格和边框属性,如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框,使用边框属性border来显示一个带有边框的表格：
1 <table border="1">2 <tr>3 <td>row 1, cell 1</td>4 <td>row 1, cell 2</td>5 </tr>6 </table>
html 表格表头单元格:表格的表头单元格使用<th>标签进行定义;表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。 大多数浏览器会把表头显示为粗体居中的文本：
1 <table border="1"> 2 <tr> 3 <th>header 1</th> 4 <th>header 2</th> 5 </tr> 6 <tr> 7 <td>row 1, cell 1</td> 8 <td>row 1, cell 2</td> 9 </tr>10 <tr>11 <td>row 2, cell 1</td>12 <td>row 2, cell 2</td>13 </tr&河南工学院gt;14 </table>
表格标题<caption>:在<table>标签中我们可以使用<caption> … </ caption>标签作为标题，并在表的顶部显示出来*此标签在较新版本的html / xhtml中已弃用
1 table border = "1">2 <caption>这是标题</caption>3 <tr>4 <td>row 1, column 1</td><td>row 1, columnn 2</td>5 </tr> 6 <tr>7 <td>row 2, column 1</td><td>row 2, columnn 2</td>8 </tr>9 </table>
html表格高度和宽度:在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。
1 <table border = "1" width = "400" height = "150"> 2 <tr> 3 <td>row 1, column 1</td> 4 <td>row 1, column 2</td> 5 </tr> 6 <tr> 7 <td>row 2, column 1</td> 8 <td>row 2, column 2</td> 9 </tr>10 </table>
html表格背景:您可以使用以下方法之一设置html表格的背景,html5中不推荐使用bgcolor，background和bordercolor属性,不要使用这些属性:
bgcolor属性 – 可以为整个表格或仅为一个单元格设置背景颜色。background属性 – 可以为整个表设置背景图像或仅为一个单元设置背景图像bordercolor属性 – 可以设置边框颜色。1 <body> 2 <table border = "1" bordercolor = "green" bgcolor = "yellow"> 3 <tr> 4 <th>column 1</th> 5 <th>英语五大句型column 2</th> 6 <th>column 3</th> 7 </tr> 8 </table> 9 <!-- 使用background属性需要提供图像 url 地址-->10 <table border = "1" bordercolor = "green" background = "/images/test.png">11 <tr>12 <th>column 1</th>13 <th>column 2</th>14 <th>column 3</th>15 </tr>16 </table>17 </body>
html表格空间:cellspacing属性-定义表格单元格之间的空间 ,cellpadding属性-表示单元格边框与单元格内容之间的距离
1 <table border = "1" cellpadding = "5" cellspacing = "5"> 2 <tr> 3 <th>name</th> 4 <th>salary</th> 5 </tr> 6 <tr> 7 <td>其琛</td> 8 <td>5000</td> 9 </tr>10 <tr>11 <td>曼迪</td>12 <td>7000</td>13 </tr>14 </table>
html合并单元格:如果要将两个或多个列合并为一个列，将使用colspan属性;如果要合并两行或更多行，则将使用rowspan属性。
1 <table border = "1"> 2 <tr> 3 <th>column 1</th>爱受伤; 4 <th>column 2</th> 5 <th>column 3</th> 6 </tr> 7 <tr> 8 <td rowspan = "2">row 1 cell 1</td> 9 <td>row 1 cell 2</td>10 <td>row 1 cell 3</td>11 </tr>12 <tr>13 <td>row 2 cell 2</td>14 <td>row 2 cell 3</td>15 </tr>16 <tr>17 <td colspan = "3">row 3 cell 1</td>18 </tr>19 </table>
html表格头部、主体、页脚:表格可以分为三个部分 – 头部，主体和页脚，如同word文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。头部，主体和页脚的对应的三个标签是：
<thead> – 创建单独的表头<tbody> – 表示表格的主体<tfoot> – 创建一个单独的表页脚表可以包含多个<tbody>元素以指示不同的页面,但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前
1 <table border = "1" width = "100%"> 2 <thead> 3 <tr> 4 <td 家乡的风光colspan = "4">this is the head of the table</td> 5 </tr> 6 </thead> 7 8 <tfoot> 9 <tr>10 <td colspan = "4">this is the foot of the table</td>11 </tr>12 </tfoot>13 14 <tbody>15 <tr>16 <td>cell 1</td>17 <td>cell 2</td>18 <td>cell 3</td>19 <td>cell 4</td>20 </tr>21 </tbody> 22 </table>
html表格的嵌套,您可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。
本文发布于:2023-04-07 09:28:28，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/ff7c941138091e71805c1ff806650261.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：table边框表头单元格空间合并等设置.doc
本文 PDF 下载地址：table边框表头单元格空间合并等设置.pdf
| 留言与评论（共有 0 条评论） |
| 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可
热门标签
|