html--表格

最新推荐文章于 2022-09-19 16:43:54 发布
最新推荐文章于 2022-09-19 16:43:54 发布
阅读量1.3k 收藏 6
点赞数
分类专栏： # Web技术应用基础-HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45823118/article/details/114953143
版权

html--表格

1.表格的基本构成

1.1任务描述

本关任务：创建你的第一个表格，它的边框宽度为5px，内容和效果图展示的一样。

实现的效果如下：
在这里插入图片描述

1.2相关知识

大家都知道，表格由行和列组成，这里我们就用HTML标签写一个表格。

<table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列。这里先创建一个两行两列的表格。代码如下：

<table border="2">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
</table>

效果如下：
在这里插入图片描述

上面border属性表示给表格添加边框，它的值2表示边框的宽度为2px。

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    
    <table border="5">
        <tr>
            <td>
                姓名
            </td>
            <td>
                语文
            </td>
            <td>
                数学
            </td>
        </tr>
        <tr>
            <td>
                李四
            </td>
            <td>
                90
            </td>
            <td>
                95
            </td>
        </tr>
    </table>
    


    <!-- ********* End ********* -->
</body>
</html>

2.表格的属性——宽、高

2.1任务描述

本关任务：创建一个表格，设置它的宽为100%，高为200px，边框为1px，内容和效果图展示的一样。

设置属性的先后顺序为border -- width -- height。

这里统一不加单位，后面的关卡不需要加的也不加。

实现的效果如下：
在这里插入图片描述

2.2 相关知识

你可以使用width和height来定义表格的宽和高，使表格更大方、美观。

例子如下：

<table border="2" width="200" height="100">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
</table>

效果如下：
在这里插入图片描述
需要注意的是：这里的width和height单位是px，可加可不加。

这里width和height的值还可以是百分比（%），这样表格就可以随着文档宽高的变化而变化。

例子如下：

<table width="60%" height="200px">
   ...
</table

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <table border="1" width="100%" height="200"> 
        <tr>
            <td>
                姓名
            </td>
            <td>
                语文
            </td>
            <td>
                数学
            </td>
            <td>
                英语
            </td>
            <td>
                合计
            </td>
            
        </tr>     
        <tr>
            <td>
                李四
            </td>
            <td>
                90
            </td>
            <td>
                95
            </td>
            <td>
                80
            </td>
            <td>
                265
            </td>
        </tr>
    </table>       
    <!-- ********* End ********* -->
</body>
</html>

3.表格的属性——cellpadding

3.1任务描述

本关任务：创建一个表格，它的边框宽度为2px， cellpadding值为6，内容和效果图展示的一样

属性的先后顺序为：border -- cellpadding。

实现的效果如下：
在这里插入图片描述

3.2相关知识

第二关虽然设置了宽、高，可是内容是紧挨着边框的，怎么使表格的内容和边框有间距呢？

这里用到了表格的另一个属性cellpadding，它规定了单元边沿与其内容之间的空白。

这里用图来说明，如图所示：
在这里插入图片描述
灰色部分表示cellpadding，它的值表示灰色部分的宽度。

例子如下：

<table border="2" cellpadding="20">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
</table>

效果如下：
在这里插入图片描述

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <table border="2" cellpadding="6">
       <tr>
            <td>
                姓名
            </td>
            <td>
                语文
            </td>
            <td>
                数学
            </td>
            <td>
                英语
            </td>
            <td>
                合计
            </td>
            
        </tr>
        <tr>
           <td>
                李四
            </td>
            <td>
                90
            </td>
            <td>
                95
            </td>
            <td>
                80
            </td>
            <td>
                265
            </td>
        </tr>
        
    </table>



    <!-- ********* End ********* -->
</body>
</html>

表格的属性——cellspacing

任务描述

本关任务：创建一个表格，它的边框宽度为1px，cellpadding值为10，cellspacing值为0，内容和效果图展示的一样。

实现的效果如下：
在这里插入图片描述

相关知识

前面表格看起来就好像有两个边框一样，怎么让它变成一条边框呢？

这里用到了表格的另一个属性cellspacing，它规定了单元格之间的空间。

这里用图来说明，如图所示：
在这里插入图片描述
双箭头的大小表示cellspacing属性的值。

只需把cellspacing的值设为0就可以实现上面的效果。

代码如下：

<table border="2" cellspacing="0" cellpadding="10">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
    </tr>
</table>

效果如下：
在这里插入图片描述

代码文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <table border="1" cellpadding="10" cellspacing="0">
       <tr>
            <td>
                姓名
            </td>
            <td>
                语文
            </td>
            <td>
                数学
            </td>
            <td>
                英语
            </td>
            <td>
                合计
            </td>
            
        </tr>
        <tr>
           <td>
                李四
            </td>
            <td>
                90
            </td>
            <td>
                95
            </td>
            <td>
                80
            </td>
            <td>
                265
            </td>
        </tr>
        

        
    </table>
    
        
        
    <!-- ********* End ********* -->
</body>
</html>
少年游四方
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html-表格-漂亮.pdf
11-18
html-表格-漂亮.pdf
头歌：HTML——表格：第2关：表格的属性——宽、高
m0_61690708的博客
11-03 1961
头歌：HTML——表格：第2关：表格的属性——宽、高
HTML——表格
热门推荐
Meropidae的博客
11-29 1万+
第1关：表格的基本构成 本关任务：创建你的第一个表格，它的边框宽度为5px，内容和效果图展示的一样。 实现的效果如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- ********* Begin ********* --> <table border="5"> .
html之编写表格（个人信息）
lixianwen007的博客
07-31 7498
首先知道做表格的几个重要属性： bgcolor：设置表格的背景色 ，有两种表达，#字母（如：#ffddee），颜色（如：white，blue，red） align： 让内容居中center，左对齐left，右对齐right ...
table表格制作
weixin_30700977的博客
10-31 145
分享一个简单的表格，代码如下： <table border=3 bordercolor=blue align=center cellspacing=3 cellpadding=6> <caption>专业设置及在校生人数表</caption> <!--标题--> <!--第一行 --> ...
每日知识总结
m0_73801853的博客
09-19 301
thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody。每个表格均有若干行（由`tr`标签定义），每行被分割为若干单元格（由`td `标签定义）。**注意**：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。现在，用于显示、展示数据。CSS中的注释以"注释以`/*`开头，以`*/`结尾,开始和结束中间为注释内容。- 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。
【HTML】表单标签，表单的格式化
林伊的博客
12-08 1088
表单标签 表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。 <form></form>是表单标签 <input type=“text”>是单行文本框，value这是默认显示内容； <input type=“password”>是密码文本框，value这是默认显示内容； <input type=“radio”>是单选框，name属性可以对其进行分组，在一个组内才能保证只能选一个，checkde=“chec
html-table表格
06-17
优化了下table表格
08-表格案例.html
12-19
08-表格案例.html
layui-高级表格-soul-table功能-HTML源码
最新发布
10-02
在IT行业中，HTML表格是网页布局中不可或缺的一部分，尤其在数据展示时，高效且美观的表格设计至关重要。layui是一款优秀的前端框架，它以其简洁、强大的特性受到开发者的喜爱。而soul-table是layui的一个扩展组件，...
简单表格CSS-HTML
02-16
总之，掌握HTML表格和CSS样式是网页设计的基础，通过学习和实践，你可以创建出各种复杂且富有视觉吸引力的表格，满足不同场景的需求。这个教程提供了一个起点，进一步深入，你还可以探索表格的交互性、响应式设计...
html中table和format,格式化HTML表格單元格，使Excel格式為文本?
weixin_42561464的博客
06-17 379
I am creating an HTML table that will be opened as a spreadsheet in Excel. What HTML tag or CSS style can I use to "tell" Excel to display the cell's contents as text?我正在創建一個HTML表，它將在Excel中作為電子表格打開。我可...
Web前端学习：HTML基础【入门宝典】
Oh_Python的博客
03-11 7088
一、HTML简介 什么是HTML？ HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言。 1、HTML的特点 （1）HTML不是编程语言，而是标记语言。 （2）HTML使用标签的形式来标识网页的不同组成部分 （3）HTML文档包含了HTML标签和文本 （4）HTML文档又叫做Web页面 （5）HTML文档的后缀：html 或 htm 2、HTML元素语法 （1）HTML 元素以开始标签起始 （2）HTML 元素以结束标签终止
html4
qq_42919799的博客
02-19 296
html4 注意： 所有的标签都是由"<>"包裹 元素内容存在于开始标签和结束标签中间的 br标签属于单标签，建议直接在使用时写为 <br/> 标签 标题 h1~h6 hr ：定义水平线，也可以用于分隔内容 用于html的注释 段落 p br : 用于换行 链接 a 普通的链接：<a href="http://www.example.com/">链接文本</a> 图像链接： <a href="http://www.example.co
HTML5中 HTML格式化／HTML样式／链表／表格－样式 韩俊强的博客
weixin_33796177的博客
08-30 201
HTML5学习从简单到复杂，循环渐进！ 每日更新关注:http://weibo.com/hanjunqiang 新浪微博！ 1.HTML格式化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
HTML5(八)结构标签、列格式化标签、合并表格
阳光小西的专栏
07-31 3083
表格系列标签当中包含有三个表示表格结构的标签，分别是thead表示表格的头部，tfoot用来表格表格的注脚，tbody用来表示表格的身体。 例子：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TABLE02</title> </head> <body> <!-- 给表格添加边框--> <tab
第1关：表格的基本构成
weixin_45784564的博客
05-22 2230
任务描述 本关任务：创建你的第一个表格，它的边框宽度为5px，内容和效果图展示的一样。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个表格的创建任务。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。 源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </
html table 高度 100,HTML設置表高度為100％
weixin_34665982的博客
06-10 271
I’ve tried doing this, but it seems to just be ignored. I found a few articles saying that if you wanted to do this then you had to make sure that the parent object was also 100%. I have the following...
html设置表格高度100%,html – IE – 在表格行中使用100％高度
weixin_33417140的博客
06-21 401
我正在使用css表,其中最后一个表行的高度为100％ – 以填充剩余的高度.这适用于我跨浏览器(包括IE).但是,如果我然后在最后一个表格行添加一些固定高度的div(这是动态内容 – 我不知道它们中有多少)最后一个div有高度：100％ – 为了填满最后一个表格行. – 像这样：这现在在IE中不起作用(即使是IE10)我该怎么做才能在IE中工作？(编辑：正如在评论中正确指出：它在任何浏览器中都不起...
038HTML-DOM对象.doc
11-30
- **Table对象**：HTML表格的核心代表，每当文档中出现一个标签，都会对应创建一个Table对象。Table对象提供了关键属性如`cells`（存储所有单元格）和`rows`（存储所有行），以及方法如`deleteRow()`和`insertRow()...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

少年游四方

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值