html table表格 - 美女信息

Devops海洋的渔夫

发布于 2019-05-31 16:18:48

1.1K0

发布于 2019-05-31 16:18:48

文章被收录于专栏：Devops专栏Devops专栏

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

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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.01.20 ，如有侵权请联系 cloudcommunity@tencent.com 删除

border