美文网首页互联网技术IT交流圈
html table表格 - 美女信息

html table表格 - 美女信息

作者: Devops海洋的渔夫 | 来源:发表于2019-01-20 19:56 被阅读35次

    仅供学习,转载请注明出处

    table 表格

    1、<table>标签:声明一个表格,它的常用属性如下:

    • border属性 定义表格的边框,设置值是数值
    • cellpadding属性 定义单元格内容与边框的距离,设置值是数值
    • cellspacing属性 定义单元格与单元格之间的距离,设置值是数值
    • align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有:left | center | right

    2、<tr>标签:定义表格中的一行

    3、<td>和<th>标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格,它们的常用属性如下:

    • align 设置单元格中内容的水平对齐方式,设置值有:left | center | right
    • valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
    • colspan 设置单元格水平合并,设置值是数值
    • rowspan 设置单元格垂直合并,设置值是数值

    表格制作练习:

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <table border="1px" cellspacing="0" cellpadding="0">
            <!-- 表头字段 -->
            <thead>
                <!-- 水平合并 -->
                <tr>
                    <th colspan="5">美女信息</th>
                </tr>
            </thead>
            <!-- 表格内容 -->
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                    <td>性别</td>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                    <!-- 垂直合并,放入图片 -->
                    <td rowspan="5">
                        <img src="http://pic1.win4000.com/pic/9/a3/11f8259a0e.jpg" width="120px" >
                    </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>
            </tbody>
        </table>
    </body>
    </html>
    

    关注微信公众号,回复【资料】、Python、PHP、JAVA、web,则可获得Python、PHP、JAVA、前端等视频资料。

    相关文章

      网友评论

        本文标题:html table表格 - 美女信息

        本文链接:https://www.haomeiwen.com/subject/bohfjqtx.html