表格标签

table 表格标签
tr 表示一行
td 表示单元格
col 代表一列

标签属性

border 表示边框属性
cellspacing 单元格空隙
align 对齐方式(center 居中)
colspan 水平合并单元格
rowsapan 垂直合并单元格

本课重要代码记录

<table border="1px" cellspaacing="0"><!--表格标签-->
<col width="200px"><!--col标签width表示宽度-->
 <tr align="center"><!--行-->
  <td colspan="7">表格示例</td><!--列-->
  <td rowspan="3">垂直单元格合并</td><!--colspan为水平合并rowspan为垂直合并-->
 </tr>
</table>

根据示例图做相同表格

完整代码示例

完整代码

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>表格标签学习</title>
 </head>
 <body>
  <table border="1px" cellspacing="0">
  <col width="200px"><!--col标签-->
  <col width="200px">
  <col width="200px">
  <col width="200px">
  <col width="200px">
  <col width="200px">
  <col width="200px">
    <tr align="center"><!--center为居中-->
    <td colspan="7">个人简历</td><!--可加width属性align="center" colspan值-->
    </tr>
        <tr align="center">
    <td>姓名</td>
    <td></td>
    <td>民族</td>
    <td></td>
    <td>感情</td>
    <td></td>
    <td rowspan="4">照片</td>
    </tr>
        <tr align="center">
    <td>电话</td>
    <td></td>
    <td>年龄</td>
    <td></td>
    <td>政治</td>
    <td></td>
    </tr>
        <tr align="center">
    <td>家庭住址</td>
    <td colspan="5"></td>
    </tr>
        <tr align="center">
    <td>毕业院校</td>
    <td colspan="5"></td>
    </tr>
  </table>
 </body>
</html>

表格进阶写法

th标签为表头-自动加粗居中文本
colgroup 分组标签 使用span width属性
thead 表格的页眉
tbody 表格主题
tfoot 表格页脚

Last modification:May 19th, 2020 at 03:41 am
如果觉得我的文章对你有用,请随意赞赏