html标签-如何制作表格

已于 2022-02-17 15:41:09 修改
阅读量4.3k 收藏 16
点赞数 2
文章标签： html 前端
于 2022-02-17 15:39:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m5426/article/details/122984192
版权
本文介绍了HTML中创建表格的基本语法，包括table、tr和td标签的使用，以及相关属性如width、height、border等的设置。通过两个案例展示了如何构建具有不同功能的表格，例如课程表的布局和样式设定，帮助理解HTML表格在网页设计中的实际应用。
摘要由CSDN通过智能技术生成

表格标签

  • 表格标签：table
  • table中的行标签：tr
  • table中的列标签：td

table标签的属性

  • width：表格的宽度，值可以是具体的值，也可以是百分比

  • height：表格的高度，值可以是具体的值，也可以是百分比

  • border：表格的边框线的粗细

  • bgcolor：表格的背景色

  • align：设置表格的对齐方式，center表示居中，left表示居左，right表示居右

  • rulles=yes：表示合并边框线

  • cellpadding：设置单元格的边框线和内容之间的距离

  • cellspacing：设置单元与相邻的单元格的距离

tr标签的属性

  • bgcolor：设置这行的背景色

  • height：设置这行的高度

  • align：设置水平居中，center表示居中，left表示居左，right表示居右

  • valign：设置垂直居中，middle表示居中，top表示上，bottom表示下

td标签的属性

  • bgcolor：设置这列的背景色

  • height：设置这列的高度

  • align：设置水平居中，center表示居中，left表示居左，right表示居右

  • valign：设置垂直居中，middle表示居中，top表示上，bottom表示下

  • rowspan：上下合并单元格

  • colspan：左右合并单元格

案例1：创建一个三行五列的表格，设置边框为黑色线，1像素大小，实线 。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table border="1px solid red" width=500 height=100 cellspacing="0" rules="yes" align="center">
        <tr align="center">
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
            <td>1-5</td>
        </tr>
        <tr align="center">
            <td>2-1</td> 
            <td>2-2</td> 
            <td>2-3</td> 
            <td>2-4</td> 
            <td>2-5</td>
        </tr>
        <tr align="center">
            <td>3-1</td>  
            <td>3-2</td> 
            <td>3-3</td> 
            <td>3-4</td> 
            <td>3-5</td>
        </tr>
    </table>
</body>
</html>

展示如下

案例2：根据图中的表格写出对应的代码

展示如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <table border="1px red solid" align="center" rules="yes" cellspacing="0" cellpadding="0" width="1000" height=300>
        <!-- 第一行: 表头 -->                 //  ←这里为注释，不会展示出去
        <tr height=40>
            <td colspan="8" align="center" bgcolor="silver"> 课 程 表</td>
        </tr>

        <!-- 第二行: 周几 -->
        <tr align="center" height=40>
            <td width="150"></td>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
            <td>周六</td>
            <td>周日</td>
        </tr>

        <!-- 第三行 -->
        <tr  align="center" height=40>
            <td rowspan="4" align="center">上午</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <!-- 第四行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>


        <!-- 第五行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>


        <!-- 第六行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>

        <!-- 第七行 -->
        <tr align="center" height=40>
            <td>午休</td>
            <td colspan="7">11：30 ~ 13：30</td>
        </tr>


        <!-- 第八行 -->
        <tr  align="center" height=40>
            <td rowspan="4" align="center">下午</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <!-- 第九行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>


        <!-- 第十行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>


        <!-- 第十一行 -->
        <tr align="center" height=40>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>

        <!-- 第十二行 -->
        <tr align="center" height=40>
            <td>晚餐</td>
            <td colspan="7">17：00 ~ 18：00</td>
        </tr>

        <!-- 第十三行 -->
        <tr  align="center" height=40>
            <td rowspan="2" align="center">晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
        </tr>

        <!-- 第十四行 -->
        <tr align="center" height=40>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
            <td>晚自习</td>
        </tr>

    </table>
</body>
</html>

m5426
关注
学习软件测试的第三天
W15032092800的博客
02-17 523
一、html的标签 html线上资料：HTML 元素 1.1 表格 表格标签：table table中的行标签 tr table中的列标签 td table标签的属性 width：表格的宽度，值可以是具体的值，也可以是百分比 height：表格的高度，值可以是具体的值，也可以是百分比 border：表格的边框先的粗细 bgcolor：表格的背景色 align：设置表格的对齐方式，center表示居中，left表示居左，right
HTML常用标签---表格标签与表单标签
qq_52409560的博客
08-18 1711
简单的表格标签与表单标签介绍
【HTML】如何使用html制作一个简易的表格？
萌萌白白的博客
02-16 1万+
如何使用html制作一个简易的表格
HTML的表格、表单
最新发布
2301_81247606的博客
09-18 630
【代码】HTML的表格、表单。
html表格制作
zx95210的博客
08-29 1358
使用标签内的
HTML表格
zhangh040629的博客
09-02 723
在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格变成了一个极受欢迎的布局工具。但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来表示格式化的数据。table表格的基本结构。
HTML中表格的制作
04-26
NULL 博文链接：https://foreach4.iteye.com/blog/2348467
vue+element-ui表格封装tag标签使用插槽
10-15
开发者可以将通用的表格代码抽取出来，制作成一个通用的封装组件。之后在需要使用表格时，只需要传入特定的参数即可生成特定的表格界面，大大提高了开发效率和维护性。 ### 结论 通过本例的学习，我们可以看到Vue....
HTML基础---表格标签
weixin_48055520的博客
04-15 1426
HTML--表格标签
04-HTML表格标签.html
01-08
04-HTML表格标签.html
(完整word版)HTML标签-按功能分类.doc
11-15
本篇文档按照功能将HTML标签进行了分类，便于理解和学习。 1. **基础标签**： - `<!DOCTYPE>`：声明文档类型，如`<!DOCTYPE html>`声明为HTML5文档。 - `<html>`：定义整个HTML文档的根元素。 - `<title>`：设置...
怎么制作一个HTML表格
cabbageboiling的博客
05-23 9615
HTML - 学习怎么做一个表格 表格在前端里是比较基础的，百米高楼平地起，所以我们更要掌握表格。 我们先看一下效果，表格包括表格标题、表头、表格内容、表格尾部内容，我们从头到尾看一下这个表格是怎么做出来的。 一：表格标签 table主要有以下属性： table由tr和td标签实现单元格的内容实现 二：标题标签 caption caption标签默认让标题在表格上面居中，不过没有加粗变黑效果，所以我们需要用一个标题标签实现这个效果。 三：表头标签 thead thead标签也是默认让表头
html 简单表格制作（看了它足以应对大部分表格）
yunduan__的博客
11-14 1万+
首先制作一个表格我们要知道一张简单表格是由二部分组成分别是表头，表身。 下面就是一个简单的表格。 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。如下图 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> &lt...
HTML表格制作
热门推荐
哇塞
06-11 4万+
HTML中制作表格有两种方法： （1）先把最原始的表格画出来，每一个都是单个单元格，然后再根据要求进行行合并或列合并，有的表格需要行列都合并，则也是把它分为两步做，先合并行再合并列（或者先合并列再合并行），若进行了colspan和rowspan的合并，则将之后同一行或同一列的单元格删除，但这种方法较麻烦，容易搞混。 （2）直接根据最终要生成的表格来操作，将每个合并的单元格看做一个小的单元格，不...
HTML制作表格
每天进步一点
09-29 3075
原文：http://www.360doc.com/content/13/0228/15/9060464_268443410.shtml#
HTML表格的制作
w6437286的博客
12-04 516
表格的基本用法： table>tr>td table:定义表格 tr:定义表格行 td:定义表格数据 表格属性： border:表格边框 cellspacing:单元格之间的距离 cellpadding:单元格内容与单元格边框之间的距离 width:表格宽度 height:表格高度 align:表格对齐方式 backgroundcolor:表格背景颜色
如何使用HTML做一个表格
2301_76390945的博客
09-13 1309
`元素来定义表头单元格的内容。在接下来的两个`<tr>`元素中，我们使用`<td>`元素来定义普通单元格的内容。在上面的示例中，我们使用`<table>`元素来创建一个表格。`<tr>`元素表示表格的行，`<th>`元素表示表头单元格，`<td>`元素表示普通单元格。<title>表格示例</title><th>姓名</th><th>年龄</th><th>性别张三</td><td>李四</td><td>男</td><td>女
HTML基础教程：关键标签与表格解析
这些基本的HTML标签和属性构成了网页构建的基础。了解并熟练使用它们是成为一名合格的网页开发者的第一步。通过不断练习和深入学习，可以掌握更复杂的布局技巧和交互效果，进一步提升HTML的运用能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值