html5简单表格制作

基础表格

table 标签

  • table 标签包含要定义的表格的全部内容;
  • 组成:thead tbody tfoot,具体如下:(如果不写这三个直接写内容,浏览器会自动将所写的东西归入到 tbody 中);
  • border 设置表格线的像素;
  • cellspacing 设置间隔;
<body>
    <table border="1px" cellspacing = "0">  <!--border设置表格线的像素,cellspacing设置间隔-->
        <thead></thead>  <!--题头:用来放标题之类的东西-->
        <tbody>          <!--正文-->
            <!--这里来设置具体的表格-->
        </tbody>
        <tfoot></tfoot>  <!--脚注-->
    </table>
</body>

现在代码运行什么都没有,因为我们还没有在 tbody 中定义表格的相关信息。

行和列

在 tbody 中

  • tr 标签是行;
  • td 标签是单元格;
  • th 标签是题头单元格,且单元格中的文本加粗并居中;
  • 快捷定义法:例如定义 4 行 5 列的表格,只需在 tbody 中输入tr*4>td*5,点击回车键,就会自动生成基础表格代码,之后再具体操作;
  • col 标签:设置列的宽度;
  • colgroup 标签:分组设置列的宽度;
  • tr 标签中:height 设置行的高度;
  • td 或 th 标签中:
    • colspan 设置把列合并;
    • rowspan 设置把行合并;
<body>
    <table border="1px" cellspacing="0">
    <thead></thead>
    <tbody>   
        <!--快捷定义法:例如定义 45 列的表格,只需在 tbody 中输入 tr*4>td*5,点击回车键,就会自动生成基础表格代码-->
        <colgroup span="6" width="100px"></colgroup>    <!--colgroup 标签:分组设置列的宽度-->
        <colgroup span="1" width="200px"></colgroup>
        <tr height="40px">  							<!--行,height设置行的高度-->
            <th colspan="7">个人简历</th>   			<!--th:是单元格,且单元格中的文本加粗并居中;colspan 把列合并-->
        </tr>
        <tr height="40px">
            <td>姓名</td>   							<!--td:是单元格-->
            <td></td>
            <td>性别</td>
            <td></td>
            <td>年龄</td>
            <td></td>
            <td rowspan="4">照片</td>   				<!--rowspan 设置把行合并-->
        </tr>
        <tr height="40px">
            <td>学历</td>
            <td></td>
            <td>籍贯</td>
            <td colspan="3"></td>
        </tr>
        <tr height="40px">
            <td>电话</td>
            <td></td>
            <td>政治面貌</td>
            <td colspan="3"></td>
        </tr>
        <tr height="40px">
            <td>毕业院校</td>
            <td colspan="5"></td>
        </tr>
        <tr height="40px">
            <td>求职意向</td>
            <td colspan="6"></td>
        </tr>
    
    </tbody>
    
    <tfoot></tfoot>
    </table>
</body>

效果如下:
html5简单表格制作_第1张图片

表单

制作表单需要用到 form 标签

  • form 标签中:action 中写提交之后跳往的网址;
  • input 标签:标签规定用户可输入数据的输入字段,type中定义文本类型,可以是文本字段、复选框、密码字段、单选按钮、按钮等等;
<body>
    <form action="http://www.kuokuo666.com">                        <!--action 中写提交之后跳往的网址-->
        <table border="1px" cellspacing="0">
            <thead></thead>
            <tbody>
                <colgroup span="2" width="200px"></colgroup>
                <colgroup span="1" width="400px"></colgroup>
                <tr height="40px">
                    <td rowspan="4" align="center">总体信息</td>    <!--居中-->
                    <td colspan="2"></td>
                </tr>
    
                <tr height="40px">  
                    <td align="right">用户名:</td>                 <!--靠右-->
                    <td>
                        <input type="text" name="login" id="">      <!--input定义输入框,type中定义文本类型,name中自定义-->
                    </td>
                </tr>
    
                <tr height="40px">    
                    <td align="right">密码:</td>
                    <td>
                        <input type="password" name="pwd" id="">
                    </td>
                </tr>
    
                <tr height="40px">  
                    <td colspan="2" align="center">
                        <input type="submit" value="提交">          <!--(提交)按钮类型,value中定义按钮上的字-->
                        <input type="reset" value="重置">           <!--(重置)按钮类型,value中定义按钮上的字-->
                    </td> 
                </tr>
    
            </tbody>
            <tfoot></tfoot>
        </table>
    </form>
</body>

效果如下:
html5简单表格制作_第2张图片

你可能感兴趣的:(html5,html5,html)