html基础篇（表格）

最新推荐文章于 2024-11-12 22:56:44 发布

划水的乌贼

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量167

点赞数

分类专栏： html 文章标签： css html javascript css3

本文链接：https://blog.csdn.net/dergfg/article/details/113757622

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

保持对代码的热爱，并保持怀疑态度
1、表格
表格的结构标签
table 声明表格
tr 行
td 列，每一个单元格

<table>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

表格的属性
width 宽度
height 高度
border 边框线（1px，都是1px, 改了高于1以后，单元格外边变，里面线不变）
cellspacing 单元格之间的间隙
cellpadding 单元格与内容之间的距离
align 水平对齐（阿楞）默认左对齐
left 左对齐 right右对齐 center水平居中
用法：
table 设置table的位置
tr 设置一行内容对齐
td 设置一个单元格内容对齐

    valign    垂直对齐   默认middle垂直居中
        top 顶部对齐  bottom 底部对齐   middle垂直居中
        用法：
             tr      设置一行垂直对齐
             td      设置一个单元格垂直对齐

合并的属性
合并行 rowspan
合并列 colspan

单元格的合并不是1+1=2，而是在自身的基础上加1.所以要删除多余的单元格
合并好后要删除多余的单元格

跨行合并是合并行，不跨行合并是合并列，不管是合并行还是合并列，合并的属性都给td设置

例子

<!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 width="800px" height="400px" border="1px"   cellspacing="0">
        <tr>
            <td width="80px" height="60px" align="center">会员姓名</td>
            <td colspan="2" width="80px" height="60px" align="center"></td>
            <!-- <td></td> -->
            <td width="80px" height="60px" align="center">出生日期</td>
            <td colspan="2" width="80px" height="60px" align="center"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td width="80px" height="60px" align="center">身份证号</td>
            <td colspan="5 width="80px" height="60px" align="center"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td width="80px" height="60px" align="center">通信地址</td>
            <td colspan="5 width="80px" height="60px" align="center"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td width="80px" height="60px" align="center">联系电话</td>
            <td colspan="5 width="80px" height="60px" align="center"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td width="80px" height="60px" align="center">会员卡号</td>
            <td colspan="5 width="80px height="60px" align="center"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
    </table>
</body>
</html>