Html学习之十六(表格与表单学习--课程表制作)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>课程表</title>
        <style>
            table{/*设置外部相关属性,不要设置内部属性*/
                width: 500px;
                height: 300px;
                border: 3px black solid;
                margin: 100px auto;
                /*padding: 20px;*/
                border-collapse: collapse;/*合并边框属性 ,使边框之间没有间距*/

            }
            td,th{/*设置内部相关属性,不要设置外部属性*/
                border: 1px black solid;
                padding: 0px 22px;
                /*padding: 20px;*/
                /*margin: 20px;*/
            }
            .td1{
                background: #A9A9A9;
                font-weight: bold;
            }
            th{
                background: brown;
                font-size:20px;
                color: aliceblue;
            }
        </style>
    </head>
    <body>
        <table><!--table是块状元素的-->
            <tr><!--使用th会使12345加粗并居中-->
                <th colspan="6">课程表</th><!--和并列即是合并的是将6列合为1列使用colspan-->
                <!--<th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>-->
            </tr>
            <tr>
                <td class="td1"></td>
                <td class="td1">周一</td>
                <td class="td1">周二</td>
                <td class="td1">周三</td>
                <td class="td1">周四</td>
                <td class="td1">周五</td>
            </tr>
            <tr>
                <td rowspan="2" class="td1">上午</td><!--合并行使用rowspan,这是合并两行-->
                <td>数学</td>
                <td>语文</td>
                <td>外语</td>
                <td>体育</td>
                <td>历史</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>语文</td>
                <td>外语</td>
                <td>体育</td>
                <td>历史</td>
            </tr>
            <tr>
                <td rowspan="2" class="td1">下午</td><!--合并行使用rowspan-->
                <td>数学</td>
                <td>语文</td>
                <td>外语</td>
                <td>体育</td>
                <td>历史</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>语文</td>
                <td>外语</td>
                <td>体育</td>
                <td>历史</td>
            </tr>
        </table>
    </body>
</html>

结果:

原文地址:https://www.cnblogs.com/lsm-boke/p/10631944.html

时间: 2024-11-07 00:54:55

Html学习之十六(表格与表单学习--课程表制作)的相关文章

JavaWeb学习记录(十六)——防止表单重复提交

产生随机字符串进行验证,如果产生的和Session存储的相同则可以提交,提交后删除session对应的属性值:否则表单提交不成功 一.产生随机字符串的工具类 package web10.util; import java.security.MessageDigest;import java.security.NoSuchAlgorithmException; import com.sun.org.apache.xerces.internal.impl.dv.util.Base64; public

李洪强和你一起学习前端之(2)表格、表单、标签语义化

大家早上好!新的一天开始了,学如逆水行舟,不进则退,一起加油吧! 在学习的过程中有任何问题想与我交流的,加我QQ: 990625403 好了,让我们开始今天的学习吧! 温故而知新 1 复习昨天的知识 1.1 单标签 <!--文本内容--> 注释标签  Ctrl +/ <br> 换行标签 <hr> 横线标签 1.2 双标签 <p></p> 段落标签 <hn></hn> n的取值是1-6  标题标签 <font size

轻松学习JavaScript十六:JavaScript的BOM学习(一)

一window对象概述 BOM的核心对象是Window对象,它表示浏览器的一个实例.window对象处于JavaScript结构的最顶层,对于每 个打开的窗口,系统都会自动为其创建window对象.所有浏览器都支持window对象,它表示浏览器窗口.所有 JavaScript全局对象.函数以及变量均自动成为 window对象的成员.全局变量是 window对象的属性.全局函数是 window对象的方法.甚至HTML DOM的document也是window 对象的属性之一.通过下面的两句代码我们

C++学习笔记十六-模板和泛型编程(二)

C++学习笔记十六-模板和泛型编程(二) 16.4 类模板成员 1.模板作用域中模板类型的引用: 通常,当使用类模板的名字的时候,必须指定模板形参.这一规则有个例外:在类本身的作用域内部,可以使用类模板的非限定名.例如,在默认构造函数和复制构造函数的声明中,名字 Queue 是 Queue<Type> 缩写表示.实质上,编译器推断,当我们引用类的名字时,引用的是同一版本.因此,复制构造函数定义其实等价于: Queue<Type>(const Queue<Type> &a

code第一部分数组:第十六题 数组表示数,加一操作

code第一部分数组:第十六题  数组表示数,加一操作 Given a number represented as an array of digits, plus one to the number. #include <iostream> #include <stdlib.h> #include <stdio.h> #include <vector> using namespace std; int * addone(int *a,int n) { in

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

表格和表单的学习知识

刚开始接触java 学习基础知识表格和表单的做法,下面写今天所学知识 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l

JavaScript学习总结(十六)——Javascript闭包(Closure)

原文地址: http://www.cnblogs.com/xdp-gacl/p/3703876.html 闭包(closure)是Javascript语言的一个难点,也是它的特色, 很多高级应用都要依靠闭包实现.很早就接触过闭包这个概念了,但是一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什么,有什么用,今天 在网上看到了一篇讲JavaScript闭包的文章(原文链接), 讲得非常好,这下算是彻底明白了JavaScript的闭包到底是个神马东东以及闭包的用途了,在此写出来和大家分

201671010140. 2016-2017-2 《Java程序设计》java学习第十六周

java学习第十六周         本周对十三章:"部署java应用程序"进行了课堂学习,在老师思路牵引下,对这一章知识进行学习,对实例程序运行和注释,对比课前对书本上知识的浅显预习,半知半解,课堂学习后,对这部分知识的理解也更加深入,尤其是在JAR文件这部分,感觉掌握的不错,对Java程序为何要打包成JAR文件,如何去做都有了进一步学习,认知,之前并不理解如何使用jar程序制作JAR文件,在课堂上同学的演示下,也理解了这部分知识.在对JAR文件中的包的密封,属性映射等方面的知识掌握