零基础学习HTML(12)——table标签（上）

最新推荐文章于 2023-05-09 19:20:12 发布

Dragon水魅

最新推荐文章于 2023-05-09 19:20:12 发布

阅读量1k

点赞数

分类专栏：零基础学习Web开发文章标签： html web

本文链接：https://blog.csdn.net/qq_43650934/article/details/108055561

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

文章目录

- - 官方资料
  - 学习正文

注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

table标签：https://man.ilovefishc.com/pageHTML5/table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十四节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
</head>
<body>
	<!--table标签用于定义HTML表格-->
	<!--tr元素定义表格中的行，th元素定义表格中的表头，td元素定义表格中的单元格-->
	<table>
		<tr>
			<th>年龄</th>
			<th>姓名</th>
		</tr>
		<tr>
			<td>小甲鱼</td>
			<td>18</td>
		</tr>
		<tr>
			<td>不二如是</td>
			<td>28</td>
		</tr>
	</table>
</html>

在这里插入图片描述
CSS定制表格边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十四节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
		table {
			border: 1px solid black;
			border-collapse: collapse;
		}
		th {
			border: 1px solid red;
		}
		td {
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<!--table标签用于定义HTML表格-->
	<!--tr元素定义表格中的行，th元素定义表格中的表头，td元素定义表格中的单元格-->
	<table>
		<tr>
			<th>年龄</th>
			<th>姓名</th>
			<th>随便说几句话</th>
		</tr>
		<tr>
			<td>小甲鱼</td>
			<td>18</td>
			<td>让编程改变世界！</td>
		</tr>
		<tr>
			<td>不二如是</td>
			<td>28</td>
			<td>表格的长度会根据单元格的长度自动变化</td>
		</tr>
	</table>
</html>

给表格添加标题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十四节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
		table {
			border: 1px solid black;
			border-collapse: collapse;
		}
		th {
			border: 1px solid red;
		}
		td {
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<!--caption标签用于给表格添加标题-->
	<table>
		<caption>添加一个标题</caption>
		<tr>
			<th>年龄</th>
			<th>姓名</th>
			<th>随便说几句话</th>
		</tr>
		<tr>
			<td>小甲鱼</td>
			<td>18</td>
			<td>让编程改变世界！</td>
		</tr>
		<tr>
			<td>不二如是</td>
			<td>28</td>
			<td>表格的长度会根据单元格的长度自动变化</td>
		</tr>
	</table>
</html>

在这里插入图片描述
通过CSS的 padding 属性调整单元格的内边距：

<!DOCTYPE html>
<html>
<head>
    <title>复仇者联盟主要成员技能表</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
    <meta name="description" content="《零基础入门学习Web开发》案例演示">
    <meta name="author" content="小甲鱼">
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 5px;
        }
        caption {
            padding: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>复仇者联盟主要成员技能表</caption>
    <thead>
        <tr>
            <th>外号</th>
            <th>原名</th>
            <th>特长</th>
            <th>照片</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>美国队长</th>
            <td>史蒂芬·罗杰斯</td>
            <td>强化体格</td>
            <td><img src="./CaptainAmerica.jpg" alt="美国队长" width="300"></td>
        </tr>
        <tr>
            <th>钢铁侠</th>
            <td>托尼·斯塔克</td>
            <td>有钱</td>
            <td><img src="./IronMan.jpg" alt="钢铁侠" width="300"></td>
        </tr>
        <tr>
            <th>雷神</th>
            <td>托尔</td>
            <td>操控雷电</td>
            <td><img src="./Thor.jpg" alt="雷神" width="300"></td>
        </tr>
        <tr>
            <th>绿巨人</th>
            <td>布鲁斯·班纳</td>
            <td>变大变强</td>
            <td><img src="./Hulk.jpg" alt="绿巨人" width="300"></td>
        </tr>
        <tr>
            <th>黑寡妇</th>
            <td>娜塔莎·罗曼诺夫</td>
            <td>性感</td>
            <td><img src="./BlackWidow.jpg" alt="黑寡妇" width="300"></td>
        </tr>
    </tbody>        
    </table>
</body>
</html>