码迷,mamicode.com
首页 > Web开发 > 详细

HTML-表格

时间:2020-06-25 21:54:32      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:cin   结果   需要   -o   group   电话   插入图片   title   src   

HTML-表格

表格

表格由<table>标签来定义,其中行由<tr>标签定义,列由<td>标签定义。快速写行和列的方法为:eg:6行7列可以写成:tr*6>td*7然后按enter键。

表格中的基本操作
  • 显示边框:<table border="1px" cellspacing="0">
  • 设置列宽:eg:前6列宽为100px,最后一列宽为100px可以写成:
        <colgroup span="6" width="100px">
        <colgroup span="1" width="200px">
  • 表头由<th>标签定义,设置行高的属性为:height="行高",文字对齐属性为:align="对齐方式"
       <tr height="40px" align="center">
           <th colspan="7">个人简历</th>
       </tr>
  • 合并表格
    在制作表格时,有时需要对表格进行合并。可以先把表格中被合并的部分延长,然后创建几行几列的表格之后再根据所需样式合并相应的行和列。将几列合并为一列:<td colspan="列数"></td>将几行合并为一行:<td rowspan="行数"></td>

  • eg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px" cellspacing="0">
        
        <colgroup span="6" width="100px">
        <colgroup span="1" width="200px">
       
       <tr height="40px" align="center">
           <th colspan="7">个人简历</th>
       </tr>
       <tr height="40px" align="center">
           <td>姓名</td>
           <td></td>
           <td>性别</td>
           <td></td>
           <td>年龄</td>
           <td></td>
           <td rowspan="4">照片</td>
       </tr>
       <tr height="40px" align="center">
           <td>学历</td>
           <td></td>
           <td>籍贯</td>
           <td colspan="3"></td>
       </tr>
       <tr height="40px" align="center">
           <td>电话</td>
           <td></td>
           <td>政治面貌</td>
           <td colspan="3"></td>
       </tr>
       <tr height="40px" align="center">
           <td>毕业院校</td>
           <td colspan="5"></td>
       </tr>
       <tr height="40px" align="center">
           <td>求职意向</td>
           <td colspan="6"></td>
       </tr>
    </table>
</body>
</html>

运行结果:
技术图片

推荐:且行且珍惜出处,人生不过如此

HTML-表格

标签:cin   结果   需要   -o   group   电话   插入图片   title   src   

原文地址:https://www.cnblogs.com/1994july/p/13192780.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!