标签 与 标签的关系---- 是互相包裹的关系(或者说 里外嵌套的关系)快捷写法:p>img
表格:由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的基本构成table、tr、td表格由行、列和单元格3部分组成。行:表格中的水平间隔。列:表格中的垂直间隔。单元格:表格中行与列相交所产生的区域。
表格的标题caption设置表格标题标签是caption。使用<caption></caption>标签创建表格标题的好处是标题定义包含在表格内。如果表格移动或者HTML文件中重定位,标题会随着表格相应地移动。
表格的标题cation的下方,紧挨着内容,我们用th表头单元格标签 (双标签)特点:在当前标签中的文本,是加粗显示,并且内容水平居中
表头单元格th
该单元格中的内容会水平居中,文本会自动加粗
把表格的内容,划分为3个部分,表格的头部区域thead;表格的主体区域tbody ;表格的底部区域tfoot
<table border="1" width="300" >
<caption><strong>学生信息表</strong></caption>
<thead>
<tr >
<th>姓名</th>
<th>班级</th>
<th>分数</th>
<th>年龄</th>
</tr>
</thead>
<tr >
<td>小余</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>小马</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>小杨</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>小王</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
预览:
table标签身上 的常用属性:border="1" width="600" align="center"border="1" 设置边框width="600" 设置表格的宽度
height="500" 设置表格的高度(一般不给表格添加高度值)
align="center" 设置表格的水平对齐方式,有3个取值,分别是:left、center、right
<tr align="center"> 在tr行标签上添加align="center" 表示 当前行的内容 水平居中
cellspacing表格的内框宽度表格的内框宽度,用于设置表格内部每个单元格之间的间距。
cellpadding表格内文字与边框间距单元格里的内容与边框的距离。
合并单元格合并单元格:水平合并、垂直合并水平跨列colspan在设计表格是,有时候需要将两个或更多个相邻单元格组合成一个单元格。
<table border="1" width="300" >
<caption><strong>学生信息表</strong></caption>
<thead>
<tr >
<th>姓名</th>
<th>班级</th>
<th>分数</th>
<th>年龄</th>
<th>合计</th>
</tr>
</thead>
<tr >
<td>小余</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>小马</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>小杨</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>小王</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>备注:</td>
<td colspan="4"></td>
</tr>
</table>
垂直跨行rowspan与水平跨列相对应,rowspan设置单元格在垂直方向上跨行的个数。
<table border="1" width="300" >
<caption><strong>学生信息表</strong></caption>
<thead>
<tr >
<th>姓名</th>
<th>班级</th>
<th>分数</th>
<th>年龄</th>
<th>合计</th>
</tr>
</thead>
<tr >
<td>小余</td>
<td></td>
<td></td>
<td></td>
<td rowspan="4"></td>
</tr>
<tr >
<td>小马</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>小杨</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>小王</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>备注:</td>
<td colspan="4"></td>
</tr>
</table>
预览:
制作细线表格的方法:步骤1:给table标签添加 cellspacing="1" cellpadding="0" bgcolor="#000000" 这3个属性步骤2:<tr bgcolor="#fff">步骤3:把给table标签添加border="1" 改成 border="0"
col 标签:为表格中一个或多个列定义属性值。
如需对全部列应用样式,<col> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。
您只能在 table 或 colgroup 元素中使用 <col> 标签。
colgroup标签:用于对表格中的列进行组合,以便对其进行格式化。
如需对全部列应用样式,<colgroup> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。
<colgroup> 标签只能在 table 元素中使用。
<table border="0" width="560" align="center" cellspacing="1" cellpadding="0" bgcolor="#000">
<thead>
<tr bgcolor="#fff">
<th>姓名</th>
<th>班级</th>
<th>分数</th>
<th>年龄</th>
<th>合计</th>
</tr>
</thead>
<tr bgcolor="#fff">
<td>小余</td>
<td></td>
<td></td>
<td></td>
<td rowspan="4"></td>
</tr>
<tr bgcolor="#fff">
<td>小马</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#fff">
<td>小杨</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#fff">
<td>小王</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#fff">
<td>备注:</td>
<td colspan="4"></td>
</tr>
</table>
预览: