HTML学习笔记08-表格

最新推荐文章于 2022-10-03 17:20:17 发布

梦忆安凉

最新推荐文章于 2022-10-03 17:20:17 发布

阅读量1.2k

点赞数 2

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/a54288447/article/details/80826803

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML表格

表格由<table>标签来定义，表格的行由<tr>标签来定义，表格的列由<td>标签来定义

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
	<tr>
		<td>第一行第一列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

</body>
</html>

border=1是设置边框的粗细，不需要边框，可以去掉

使用<th>标签定义表头，大部分浏览器会把表头加粗居中显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
	<tr>
		<th>表头1</th>
		<th>表头2</th>
	</tr>
	<tr>
		<td>第一行第一列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

</body>
</html>

跨格表格使用colspan属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
	<tr>
		<th colspan="2">单元格跨两格</th>
	</tr>
	<tr>
		<td>第一行第一列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

</body>
</html>

跨列表格使用rowspan属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
	<tr>
		<th>表头1</th>
		<th>表头2</th>
	</tr>
	<tr>
		<td rowspan="2">单元格跨两列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第二列</td>
	</tr>
</table>

</body>
</html>

<thead>:表格的页眉主要用来放表头

<tbody>:表格的主体主要用来放表格的内容

<tfoot>:表格的页脚主要用来放类似统计数据的东西

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>英文</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>60</td>
            <td>70</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合计</td>
            <td></td>
            <td>150</td>
        </tr>
    </tfoot>
    </table>

梦忆安凉

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记08-表格

HTML表格表格由<table>标签来定义，表格的行由<tr>标签来定义，表格的列由<td>标签来定义<!DOCTYPE html><html><head><meta charset="utf-8"> <title>表格</title> </head>&l...
复制链接

扫一扫