HTML中的table标签制作表格

HTML中有一个重要的标签table,常用于构建表格,如果你要用HTML做一张课表,那么它的table标签就可以大显身手了。下面分享出一份某小学生课表的完整HTML代码,不足的地方欢迎指正!

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>html中表格</title>
 6 </head>
 7 <body>
 8 <table border="1" width="800" align="center" cellpadding="10" cellspacing="0">
 9 <!--    标题-->
10     <caption><h2>某小学一年级(三班)课程表</h2></caption>
11 <!--    表头-->
12     <thead>
13     <tr bgcolor="#90ee90">
14         <th>星期</th>
15         <th>星期一</th>
16         <th>星期二</th>
17         <th>星期三</th>
18         <th>星期四</th>
19         <th>星期五</th>
20     </tr>
21     </thead>
22
23 <!--    主体-->
24     <tbody align="center">
25     <tr>
26         <td rowspan="3" bgcolor="#f5deb3">上午<br>8:00 - 11:30</td>
27         <td>语文</td>
28         <td>数学</td>
29         <td>美术</td>
30         <td>体育</td>
31         <td>音乐</td>
32     </tr>
33     <tr>
34
35         <td>语文</td>
36         <td>数学</td>
37         <td>美术</td>
38         <td>体育</td>
39         <td>音乐</td>
40     </tr>
41     <tr>
42
43         <td>语文</td>
44         <td>数学</td>
45         <td>美术</td>
46         <td>体育</td>
47         <td>音乐</td>
48     </tr>
49
50     <tr>
51         <td rowspan="2" bgcolor="#e0ffff">下午<br>13:30 - 15:30</td>
52         <td>语文</td>
53         <td>数学</td>
54         <td>美术</td>
55         <td>体育</td>
56         <td>音乐</td>
57     </tr>
58     <tr>
59
60         <td>语文</td>
61         <td>数学</td>
62         <td>美术</td>
63         <td>体育</td>
64         <td>音乐</td>
65     </tr>
66     </tbody>
67
68     <tfoot align="center">
69     <tr bgcolor="#d3d3d3">
70         <td>备注:</td>
71         <td colspan="5">周未家长应该多些时间陪同孩子学习</td>
72     </tr>
73     </tfoot>
74 </table>
75 </body>
76 </html>

代码运行结果如下图所示:

原文地址:https://www.cnblogs.com/wanna-lipeng/p/11823071.html

时间: 2024-10-11 01:15:59

HTML中的table标签制作表格的相关文章

ul+li标签制作表格

table标签制作表格代码繁琐,且不方便后期代码维护. li标签加上css的浮动样式可以制作多种样式的表格. 代码如下: <ul id="ttttt" style="width:404px;text-align:center;line-height:30px;border-left:1px solid #000;border-top:1px solid #000;"> <li style="width:403px;height:30px;

前端内容之HTML:HTTP协议、HTML中重要的标签、表格、表单等

什么是前端: 与用户直接打交道的,例如:手机电脑的界面 什么是后端: 幕后操作者,不直接与用户打交道的 WEB服务的本质: 浏览器中输入网址回车发送了几件事? 1.浏览器朝服务端发送请求 2.服务端接收请求 3.服务端返回响应 4.浏览器接收响应            按照相应的规则渲染给用户看. HTTP协议: 超文本传输协议 规定了浏览器与服务端传输数据的格式 四大特性: 1.基于请求响应 2.基于TCP/IP之上的作用于应用层的协议 3.无状态(服务端不保存用户状态,即使同一用户每次来都当

WEB前端开发学习----2.HTML表格table标签

[html] view plaincopy css没用流行之前,网页都是用表格,也就是table标签制作的.虽然现在不用table做网页了,但是我们还是应该掌握这个标签.</span> 先给出最表格的基本格式: [html] view plaincopy <table> <tr> <tb> </tb> </tr> <table> 其中<tr>为行标签,即表格的行.<td>为单元格数据标签.也就是说一

(二)HTML中的部分标签

HTML作为一种超文本标记语言,其中用到了大量的标签,昨天主要看了HTML中的图像标签和表格标签. (一)图像标签 <img> <img src="url"/>(url 是统一资源定位符的意思uniform resource locator) 标签img中的属性:alt="文本" -------->图片无法显示时的替换本文属性(养成良好习惯,最好都具有该属性) border="_px"-------->图像的边

HTML5列表标签和表格标签

一.列表 1.1 什么是列表标签? 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体 无序列表---unordered-list(最多):新闻列表.导航.商品列表作用:给一堆数据添加列表语义里面所有数据没有优先之分只是列举出来可以列举图片文字视频 ```<ul><li></li></ul>```ul里面有属性 type="circle/square/disc"  清除前面符号 list-style:none:

制作表格的格式及标签

在html中,制作表格标签要用到 table(table指的是表格标签) tr(tr指表格的行标签),td(td指表格的列标签),这里需要注意的是,标签是成对出现的,例如<table></table>.标签的配对采用就近原则.表格开头要用table表示,<>是html修饰表现的符号,所有的标签都要用<>来修饰. 制作标签时格式如下: <table> <tr><td>你好</td><td>好的<

HTML——表格table标签,tr或者td

表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 "bgcolor" 是不被赞成使用的. 在 XHTML 1.0 Strict DTD 中,tr 元素的 "bgcolor" 是不被支持的. 可选的属性 属性 值 描述 align right left center justify char 定义表格行的内容对齐方式.

table标签,认识网页上的表格

有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单.如下表: 想在网页上展示上述表格效果可以使用以下代码: 创建表格的四个元素: table.tbody.tr.th.td 1.<table>…</table>:整个表格以<table>标记开始.</table>标记结束. 2.<tbody>…</tbody>:table body, 当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标

如何用&lt;dl&gt;标签做表格而不用table标签

我们都知道很多的内容编辑器(TinyMCE编辑器.fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,table标签对搜索引擎不是很友好,table太多话可能无法被SE收录,有没办法用其他方法来实现绘制表格呢?比如用<dl>标签? <dl> 标签是定义列表(definition list),结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目),并将它们设置为同行显示就能实现表格的效果