html标签-如何制作表格

已于 2022-02-17 15:41:09 修改
阅读量4.2k 收藏 16
点赞数 2
文章标签： html 前端
于 2022-02-17 15:39:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m5426/article/details/122984192
版权

表格标签

  • 表格标签：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
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何使用HTML做一个表格
2301_76390945的博客
09-13 1247
`元素来定义表头单元格的内容。在接下来的两个`<tr>`元素中，我们使用`<td>`元素来定义普通单元格的内容。在上面的示例中，我们使用`<table>`元素来创建一个表格。`<tr>`元素表示表格的行，`<th>`元素表示表头单元格，`<td>`元素表示普通单元格。<title>表格示例</title><th>姓名</th><th>年龄</th><th>性别张三</td><td>李四</td><td>男</td><td>女
html表格制作
zx95210的博客
08-29 1309
使用标签内的
html表格（详解网页表格的制作）
最新发布
百赢出品，必属精品
04-26 1849
HTML 表格由 标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题。tr：tr 是 table row 的缩写，表示表格的一行。td：td 是 table data 的缩写，表示表格的数据单元格。th：th 是 table header的缩写，表示表格的表头单元格。
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 8万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
HTML第二章 “表格”详解 （附带详细代码与解释）！！！
a2499797637的博客
09-30 8271
1.表格的语法、2. 表格的可选标记、3. 表格的属性、4. 不规则的表格、5. 表格的大小
HTML—表格
Ywyyy231128的博客
11-14 4667
此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。***一个表格只能有一个标题，也就是只能有一个caption标签。***分析：在默认情况下，表格是没有边框的。***说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们具有以下区别。***说明：在表格中，有多少组“",就表示有多少行。
HTML制作表格.ppt
11-15
HTML制作表格 本章节将介绍HTML制作表格的相关知识点，以便读者能够快速掌握HTML表格的制作方法和美化技巧。 一、为什么使用表格？ 表格是HTML文档中的一种常见结构，广泛应用于网页上的文本和图像存放。它可以将...
HTML制作表格ppt课件.ppt
11-12
HTML 表格制作 HTML 表格制作是 HTML 中非常重要的一部分，它可以用来存放网页上的文本和图像。表格可以分成行、列、单元格，使用 TABLE、TR、TD 等标签来定义。 为什么使用表格？ 表格应用场合非常广泛，如论坛、...
04-HTML表格标签.html
01-08
04-HTML表格标签.html
HTML5制作表格样式
09-27
本篇文章将详细介绍如何使用HTML5来制作一个美观、易于理解的表格，并通过CSS进行样式定制，使其更具吸引力。首先，我们来看一下基本的HTML结构。 ```html <!DOCTYPE html> <html> <meta charset="utf-8"> 表格 ...
HTML基础重点_一般标签、常用标签和表格
12-13
–开始标签  <head>  网页上的控制信息  <title>页面标题</title>  </head>  <body>  页面显示的内容  </body> </html> –结束标签 <!–注释内容–> 注释 ...
html 之表格
云胡
07-13 470
<body> <h4> 一列: </h4> <!-- <table border = "1"> --> <tr> <td> 100 </td> </tr> </body>加上 <table border = "1">之后表格的每一格，及边框加上1像素的边框，如下图所示。 <body> <h4> 一行三列: </h4> <table border = "1"> <tr>
如何用html制作自动校验表,用HTML5+css3制作HTML5验证的网页表单
weixin_39518840的博客
05-30 219
今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。下面是用HTML5+css3制作HTML5验证的网页表单的相关内容，文章教程主要讲述与HTML5 css3 验证 表单 相关的一些技术与知识，更多的内容欢迎大家访问http://www.alixixi.com,获取更多最新教程,下面是教程讲解： 文章简介：...
用HTML提交基因检测项目表格
genedecoders的博客
09-04 129
这里是一个用HTML写的表格提交代码。结合后面PHP代码，在PHP兼容的服务器中可以用来提交并展示收集的数据。 <!doctype html> 基因检测项目选择表：佳学基因全方位基因检测提供方！ 从下面的表格中选择你要做的基因检测项目，基因解码要优于基因检测 <p>Name: <select name="title" required> <option value="zhibing">致病基因鉴定</option> <opt
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
html如何制作动态表格，增加或者删除
weixin_41808376的博客
03-08 1万+
功能如图所示核心代码如下html部分 &lt;div class="extends" &gt; &lt;div class="extends_item" style="height:400px;width:100%; padding-left:1%" &gt; &lt;div class="title"&gt;&lt;span style=&
HTML-简单表格制作
weixin_43812678的博客
08-01 1736
HTML简单表格制作 先给大家看一下我用的软件~ 这个是我下载软件的文件夹 这个是我下载的软件桌面的快捷方式的图片 页面打开是这样的 file就是新建或者打开文件的，一般你新建一个html文件的时候，先保存本地，把名字改成以.html结尾的，然后在软件页面输入英文的html:5或者！按键盘上面的tab键就可以出现基本代码了~一般这样都是可以成功的。 xiam ...
HTML之如何创建表格？
花果山的和尚的博客
06-19 2万+
表格由 &lt;table&gt; 标签来定义。每个表格均有若干行（由 &lt;tr&gt; 标签定义），每行被分割为若干单元格（由 &lt;td&gt; 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。border属性指定有无边框，不写border属性或者赋值为0，创建的表格都将没有边框;赋值的大小...
HTML 表单制作
boonyaxnn的博客
08-24 3655
我的主页 教学意见调查表 个人及课程资料 科目名称 请选择系所: 音乐系 法律系 英语系 土木系 电子工程系 商务管理系 讲师： 性别： 女生 男生 开课日期： 意见调查 这门课的出勤状况是 没有缺课  缺课1-3次  缺课3-5次  选这门课的原因（可所选）： 必
html网页制作表格
10-12
要制作HTML网页中的表格，可以使用HTML的table标签。具体步骤如下： 1. 在HTML文件中，使用table标签来定义表格，如下所示： ``` 表头1 表头2 单元格1 单元格2 单元格3 单元格4 ``` 2. 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值