HTML 表格
HTML 表格实例
HTML 表格
　表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
　HTML 表格的基本结构：
<table>…</table>：定义表格
<th>…</th>：定义表格的标题栏（文字加粗） 
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列
表格实例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
　在浏览器显示如下：:
HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
　使用边框属性border来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表头单元格
表格的表头单元格使用<th>标签进行定义。
　表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。 
　大多数浏览器会把表头显示为粗体居中的文本：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：
表格标题<caption>
　  在<table>标签中我们可以使用<caption> ... </ caption>标签作为标题，并在表的顶部显示出来。
注：此标签在较新版本的HTML / XHTML中已弃用
<table border = "1">
<caption>这是标题</caption>
<tr>
<td>row 1, column 1</td>
<td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, columnn 2</td>
</tr>
</table>
HTML表格高度和宽度
在<table>标签中您可以使用width（宽）和heighthtml表格内外边框颜（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
HTML表格背景
　您可以使用以下方法之一设置HTML表格的背景 
∙ bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜。
∙ background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。
∙ bordercolor属性 - 可以设置边框颜。
注：HTML5中不推荐使用bgcolor，background和bordercolor属性。不要使用这些属性。 
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
</body>
使用background属性需要提供图像 URL 地址：
<table border = "1" bordercolor = "green" background = "/images/test.png">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</table>
HTML表格空间
　有以下两个属性，用于调整HTML表格中单元格的空间：
∙ cellspacing属性-定义表格单元格之间的空间 
∙ cellpadding属性-表示单元格边框与单元格内容之间的距离
∙ <table border = "1" cellpadding = "5" cellspacing = "5">
∙     <tr>
∙         <th>Name</th>        <th>Salary</th>    </tr>
∙     <tr>
∙         <td>其琛</td>        <td>5000</td>    </tr>
∙     <tr>
∙         <td>曼迪</td>        <td>7000</td>    </tr>
∙ </table>
HTML合并单元格
∙ 如果要将两个或多个列合并为一个列，将使用colspan属性 
∙ 如果要合并两行或更多行，则将使用rowspan属性。
∙ <table border = "1">
∙     <tr>
∙         <th>Column 1</th>        <th>Column 2</th>        <th>Column 3</th>    </tr>
∙     <tr>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。