HTML----02

最新推荐文章于 2024-06-15 21:20:00 发布

.小羊同学

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量141

点赞数

分类专栏： HTML 文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_46227555/article/details/121752704

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表格：展示数据

列表：页面布局

表单：收集用户信息

在表中，没有列的概念，都是一行一行来的

<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>
</body>

<tr></tr>标签里只能放<td></td>，不能放<div>

但是<td></td>里放啥都行~

表格属性

属性	含义	常用值
border	设置表格边框
cellspacing	设置单元格之间边框的空白间距
cellpadding	设置单元格内容与单元格边框之间的空白间距
width	设置表格的宽度
height	设置表格的高度
align	设置表格在网页中的对齐方式	left、center、right

表头单元格th

用法：在第一行实现文本居中、加粗

<table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>

表格标题caption

用法：为表格加上标题

<table border="1">
        <caption>这是标题</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>

合并单元

跨行合并：rowspan="单元格个数"

跨列合并：colspan="单元格个数"

合并顺序：先上后下，先左后右

确定目标单元格，然后把多余的单元格删掉

<table border="1" align="center">
		<caption>这是标题</caption>
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>小明</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr>
				<td>哈哈哈</td>
				<td>48</td>
				<td>女</td>
			</tr>
			<tr>
				<td>啦啦啦</td>
				<td>88</td>
				<td>男</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>地址</td>
				<td colspan="2">宇宙天桥</td>
			</tr>
		</tfoot>
	</table>

.小羊同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML----02

表格：展示数据列表：页面布局表单：收集用户信息在表中，没有列的概念，都是一行一行来的<body> <table> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr>
复制链接

扫一扫