HTML——表格

最新推荐文章于 2024-06-20 10:34:39 发布
最新推荐文章于 2024-06-20 10:34:39 发布
阅读量1w 收藏 143
点赞数 53
分类专栏： 头歌 网络技术与爬虫 文章标签： python 开发语言 html 前端 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62287709/article/details/121615448
版权

第1关：表格的基本构成

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

实现的效果如下：

 

<!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关：表格的属性——宽、高

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

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

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

实现的效果如下：

 

<!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

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

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

实现的效果如下：

 

<!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>

第4关：表格的属性——cellspacing

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

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <table border="1" cellspacing="0" cellpadding="10">
        <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>

 第5关：表格的标题

本关任务：添加一个表格标题，内容为科目成绩。

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1" cellpadding="10" cellspacing="0">
        <!-- ********* Begin ********* -->
        <caption>科目成绩</caption>
        <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 ********* -->
        <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>
</body>
</html>

 第6关：表格——<td> 标签的 rowspan 属性

本关任务：在前几关的基础上，完成下面的表格创建任务。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
        <table border="2" cellspacing="0" width="200">
    <!-- ********* Begin ********* -->
        <tr>
            <td>商品 </td>
            <td>数量</td>
            <td>单价</td>
            
            <td>备注</td>
        </tr>
        <tr>
            <td>短袖</td>
            <td>70</td>
            <td>30</td>
            <td rowspan="2">无</td>
        </tr>
        <tr>
            <td>裤子</td>
            <td>50</td>
            <td>30</td>
        </tr>
    </table>        
    <!-- ********* End ********* -->
    </table>
</body>
</html>

第7关：表格——<td>标签的colspan属性

本关任务：结合前几关的知识，完成以下表格的创建任务。

实现的效果如下：

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="2" cellspacing="0" width="200">
    <!-- ********* Begin ********* -->
        <tr>
            <td>商品 </td>
            <td>数量</td>
            <td>单价</td>         
        </tr>
        <tr>
            <td>短袖</td>
            <td>70</td>
            <td>30</td>            
        </tr>
        <tr>
            <td>裤子</td>
            <td>50</td>
            <td>30</td>
        </tr>
        <tr>
            <td>合计</td>
            <td colspan="2">3600 </td>
        </tr>
    <!-- ********* End ********* -->
    </table>
</body>
</html>

第8关：表格的综合案例

本关任务：按照以下要求，完成一个复杂的表格创建任务。

创建表格的要求如下：

  • 边框为2px；

  • 宽为100%；

  • cellspacing为0；

  • cellpadding为6；

  • 标题内容为本周财政计划；

  • 在 <style> 标签里设置文本为居中对齐。

其它内容和效果图展示的一样。

注意：表格属性的顺序按照创建表格的要求的顺序来写。

实现的效果如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <style>
    body{
       margin:30px;
    }
    table{
       /*居中对齐*/
        text-align: center;     
    }
    </style>
    <!--设置表格-->
    <caption>本周财政计划</caption>
    <table border="2" cellspacing="0" cellpadding="6" width="100%">
        <caption>本周财政计划</caption>
    <tr>
        <td rowspan="2"colspan="2">项目 </td>
        <td colspan="2">本周发生</td>
        <td rowspan="2">备注</td>
    </tr>
    <tr>
        <td>收入</td>
        <td>支出</td>
    </tr>
    <tr>
        <td rowspan="3">收入</td>
        <td>贷款收回</td>
        <td>8700</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td>内部转款</td>
        <td>6000</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td>收入合计</td>
        <td>14700</td>
        <td>0</td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="3">支出</td>
        <td>采购支出</td>
        <td>0</td>
        <td>5000</td>
        <td></td>
    </tr>
    <tr>
        <td>工资支出</td>
        <td>0</td>
        <td>7000</td>
        <td></td>
    </tr>
    <tr>
        <td>支出合计</td>
        <td>0</td>
        <td>12000</td>
        <td></td>
    </tr>         
    <!-- ********* End ********* -->
</body>
</html>

 求求三连。。

Meropidae
关注
  • 53
    点赞
  • 踩
  • 143
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML 表格
xu_ya_fei的专栏
04-30 354
HTML 表格 表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格实例 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cel
html 表格
08-28 511
<!-- 作者：xwl281928290@163.com 时间：2016-07-25 描述： border:设置表格线的宽度 width：设置表格宽度 height：设置表格高度 cellpadding：设置表格内文字距离左边宽度 cellspacing：设置表格线与线的间距 bgcolor：设置表格背景颜色 caption：设
html table实现复杂表头的示例代码
11-20
使用html做复杂的表格。复杂表格一般是用到td的两个属性：rowspan 、colspan属性值。 在html中<td> 标签定义 HTML 表格中的标准单元格。 　　(1)rowspan 属性规定单元格可横跨的行数; 　　(2)colspan 属性规定单元格可横跨的列数。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多表头表格</title> </head> <body> <table id="tab" cellpadding="1"
HTML复杂表格绘制实现思路
CodingNoob
03-07 4626
最近在做项目的时候遇到一个需求，要做一个表格，这个表格是Excel里面业务人员绘制好的，表格结构比较复杂，如果要自己一个一个地用table去编写需要花很长的时间，于是想了下要怎么去实现复杂表格的方案，话不多说。 比如如果要实现下面的表格（这个还算好的了，如果更复杂那应该怎么办）： 于是，我想了下，能不能找到一些工具插件之类的去实现，找了一两个小时之后发现还是没有，然后以前刚毕业的那段时间在...
HTML表格使用全指南，真的很详细
最新发布
(黎子)人生编码
06-20 1710
通过使用CSS媒体查询和JavaScript，开发者可以创建出既美观又实用的表格，确保用户在任何设备上都能获得良好的浏览体验。通过合理的语义化标签使用，开发者可以创建出既美观又易于理解的表格。通过使用适当的属性和技巧，我们可以提高表格的可访问性。通过CSS样式设计和布局控制，HTML表格不仅可以提供清晰的数据展示，还能成为网页上的美观元素。跨行和跨列是表格设计中常用的技术，用于合并单元格，使表格布局更加灵活和紧凑。控制表格的布局对于确保数据的可读性和表格的整体美观至关重要。标签进行表格的语义化。
使用原生html＜table＞构造复杂table表
qq_42192641的博客
09-25 1458
【代码】使用原生html＜table＞构造复杂table表。
表格的综合案例
m0_51863774的博客
10-30 1632
/按照最细的划分，八行五列，再带入colspan和rowspan两个参数，然后修改，这里注意，表格属性设置的时候，彼此间隔只是一个空格，不能多打，然后一定是竖着写的，不能横着写。不知你们有没有发现，表格的内容都是靠左的，在表格宽度比较大的情况下是很明显的。这关是对大家前面所学知识的一个总结和拓展，通过前面的学习，做一个表格是没有问题的。也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性。这里介绍一个控制表格内文本方向的属性，本来表格有自带的属性。
头歌：HTML——表格：第2关：表格的属性——宽、高
m0_61690708的博客
11-03 1970
头歌：HTML——表格：第2关：表格的属性——宽、高
HTML标记语言——表格标记
12-10
上文：标记语言——标题 原文出处 标准化设计解决方案 – 标记语言和样式手册 Web Standards Solutions The Markup and Style Handbook Part 1: Get Down With Markup 从标记语法谈起 Chapter2 邪恶的表格？ 你知道...
html表格——表格合并.docx
09-26
HTML 表格合并 HTML 表格合并是指在 HTML 表格中，合并单元格的技术。合并单元格可以将多个单元格合并成一个单元格，从而实现表格的灵活布局。 在 HTML 表格中，cell 属性是一个非常重要的概念。cell 属性表示表格...
HTML5制作表格样式
09-27
接下来是关键部分——表格的HTML结构。`<table>`元素是表格的容器，`<thead>`表示表头，`<tbody>`表示表格主体，`<tfoot>`表示表尾。例如： ```html 列1 列2 行1，单元格1 行1，单元格2 行2...
table-editor:表格编辑器，用于在HTML中创建复杂的表格
05-10
表格编辑器 当Markdown不能剪切时，用于复杂表的WYSIWYG HTML编辑器。 屏幕截图 现场例子 命名法 复杂表：当表在任何地方都需要标题单元格，合并的单元格和各种类时 技术文档 这是一个纯静态JavaScript应用程序，可以在任何现代浏览器中运行。 至少在首次加载页面时，它需要Internet连接才能访问TinyMCE的CDN。 依存关系 通过CDN使用的编辑器JS 执照
HTML——月历
10-29
HTML、CSS 和 JavaScript 是网页开发的三大核心技术，它们共同构建了网页的结构、样式和交互功能。在这个项目中，我们利用这些技术制作了一个简单的月历应用程序。下面将详细讲解这个月历实现的关键知识点。 首先，...
（二）html 复杂表格
花狗Fdog的博客
10-30 5362
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>程序员之美</title> <meta charset="utf-8" /> <style type="text/css"> /*表格样式*/ t...
html复杂表格
百尺竿头，更进一步
08-17 3829
基本表格 1.1 1.2 1.3 2.1 2.2 2.3 3.1
html各类表格制作,HTML：复杂表格制作
weixin_36118049的博客
06-10 1722
我是标题简单表格表格的制作可以通过等标签的组合来构造。这样一段HTML：row0.col1row0.col2row1.col1row1.col2row2.col1row2.col2可以得到这样的表格：table跨行/列表格制作如果想制作复杂的跨行或列的表格就需要用到的rowspan和colspan属性了。详细使用请参考W3School提供的示例。那么，如果我们要做一个这样的表格：table分析一下...
第1关：表格的基本构成
weixin_45784564的博客
05-22 2238
任务描述 本关任务：创建你的第一个表格，它的边框宽度为5px，内容和效果图展示的一样。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个表格的创建任务。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。 源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </
浅谈如何正确给table加边框
denghut882925的博客
06-05 901
一般来说，给表格加边框都会出现不同的问题，以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px solid #0094ff; } table { width: 200px; min-height: 25px; line-height: 25px...
HTML表格标记属性详解
1. **设置表格的宽度和高度——width和height** 在HTML中，可以使用`<table>`标签内的`width`和`height`属性来指定表格的宽度和高度。例如： ```html ``` 这将创建一个宽500像素，高300像素的表格。 2. **...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值