table边框表头单元格空间合并等设置

程序员文章站 2024-01-24 12:35:28

表格和边框属性, 表格表头单元格，表格标题，表格高度和宽度，表格背景，表格空间，合并单元格，表格头部、主体、页脚,定义表格,定义表格的行,定义表格列的组定义用于表格列的属性,定义表格的页眉,定义表格的主体定义表格的页脚

\定义表格的表头,<... ......

表格由<table>标签来定义,每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1 html 表格的基本结构：
2 <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>
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>内的几乎所有标签。

上一篇： .NET Core读取配置文件方式详细总结

下一篇： Unity3d获取系统时间