表格由标签定义,每个表格有几行(由标签定义),每行分为多个单元格(由标签定义)。 字母 td 指的是表格数据html边框线怎么设置,即数据单元格的内容。 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
1 HTML 表格的基本结构: 2 <table>…</table>:定义表格 3 <th>…</th>:定义表格的标题栏(文字加粗) 4 <tr>…</tr>:定义表格的行 5 <td>…</td>:定义表格的列
HTML表格和边框属性,如果不定义边框属性,表格将不会显示边框。 有时这很有用,但大多数时候,我们想要显示一个边框,使用 border 属性 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表格标题单元格:表格标题单元格由标签定义; 表头单元格属性主要是一些公共属性,如: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>
表格标题:在标签中,我们可以使用 ... 标签作为标题,并将其显示在表格底部 *此标签在较新版本的 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表格的高度和长度:在标签中你可以使用宽度(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 属性。 不要使用该属性:
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 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文档中页面的脚注、正文和页脚一样。 每个页面保持不变,而正文是表格的主要内容。 header、body、page number对应的三个标签是:
- 创建一个单独的表头 - 表示表的主体 - 创建一个单独的表页脚
表格可以包含多个元素来表示不同的页面,但值得注意的是html边框线怎么设置, 和 标签应该出现在前面
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 表格嵌套,您可以在一个表格内使用另一个表格。 几乎可以使用其中的任何标签。