如何用HTML制作一个简单的表格

xiao(づ ●─● )づou 2023-11-19 13:06:56

1.效果展示：

img

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>课程表</title>
    <style>
        body{
            background-image: url(https://p0.ssl.qhimgs1.com/sdr/400__/t01faa7e9be828247fe.jpg);
            background-repeat: no-repeat;  
            background-position-x: center;
            background-position-y: center;
            background-size: cover;
        }
        .abc{
            width: 1000px;
            height: 500px;
            font-size: 20px;
            text-align: center;
            font-family: 'ZoomlaCarved';
            border: 5px solid ghostwhite;
            border-collapse: collapse;
        }
        .g{
            font-size: 24px;
            color: chartreuse;
        }
        @font-face{font-family:'ZoomlaCarved'; /*逐浪海棠居刻本字*/
    src: url('https://code.z01.com/font/ZoomlaCarved.eot?#iefix'); /* IE9 */
    src: url('https://code.z01.com/font/ZoomlaCarved.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */
    url('https://code.z01.com/font/ZoomlaCarved.woff') format("woff"), /* chrome、firefox */
    url('https://code.z01.com/font/ZoomlaCarved.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url('https://code.z01.com/font/ZoomlaCarved.svg#ZoomlaCarved') format("svg"); /* iOS 4.1- */
    font-style: normal; font-weight: normal;}
    @font-face{font-family:'ZoomlaTangYin-A053'; /*逐浪唐寅行书体*/
    src: url('https://code.z01.com/font/ZoomlaTangYin-A053.eot?#iefix'); /* IE9 */
    src: url('https://code.z01.com/font/ZoomlaTangYin-A053.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */
    url('https://code.z01.com/font/ZoomlaTangYin-A053.woff') format("woff"), /* chrome、firefox */
    url('https://code.z01.com/font/ZoomlaTangYin-A053.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url('https://code.z01.com/font/ZoomlaTangYin-A053.svg#ZoomlaTangYin-A053') format("svg"); /* iOS 4.1- */
    font-style: normal; font-weight: normal;}
    </style>
</head>
<body>
<script>   
function getDateTime() {  
    var now = new Date();  
    var date = now.getFullYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日";  
    var hours = now.getHours();  
    var minutes = now.getMinutes();  
    var seconds = now.getSeconds();  
    return date + " " + hours + ":" + minutes + ":" + seconds;  
} 

function updateTime() {  
    var timeElement = document.getElementById("demo");  
    timeElement.innerHTML = getDateTime(); 
}  
setInterval(updateTime, 1000);    
</script>  
    <table border="10px solid " align="center" class="abc">
        <caption style="color: aqua;border: 5px solid;">课程表</caption>
        <th id="demo" colspan="9" class="g"></th>
        <div style="text-align: center;">
            <img src="123.png" width="850px" height="150px">
        </div>
        <tr>
            <th>时间段</th>
            <th>节次</th>
            <th>星期一(Monday)</th>
            <th>星期二(Tuesday)</th>
            <th>星期三(Wednesday)</th>
            <th>星期四(Thursday)</th>
            <th>星期五(Friday)</th>
            <th>星期六(Saturday)</th>
            <th>星期七(Sunday)</th>
        </tr>
        <tr>
            <td rowspan="4" >上午
            <div style="text-align: center;">
            <img src="http://img95.699pic.com/photo/30253/8148.jpg_wh300.jpg!/fh/300" width="50px" height="50px" >
            </div>
            <td >1</td>
            <td></td>
            <td> </td>
            <td rowspan="2">高等数学08:30-10:10
            <td rowspan="2">大学英语08:30-10:10
            <td rowspan="2">高等数学08:30-10:10
            <td rowspan="8">军事理论08:30-10:10
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td rowspan="2">高等数学10:30-12:10
            <td rowspan="2">离散数学10:30-12:10
            <td rowspan="2">高级语言程序设计(10:30)
            <td rowspan="2">离散数学10:30-12:10
            <td rowspan="2">专业导论10:30-12:10
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td></td>
        </tr>
        <tr>
        <td rowspan="4">下午
        <div style="text-align: center;">
            <img src="https://icweiliimg1.pstatp.com/weili/bl/57460030999500742.jpg" width="50px" height="50px" >
        </div>
        <td>5</td>
        <td></td>
        <td rowspan="2">大学英语14:00-14:45
        <td></td>
        <td rowspan="2">军事理论14:00-14:45
        <td rowspan="2">高级语言程序设计(14:00)
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>7</td>
        <td rowspan="2">高级语言程序设计
        <td></td>
        <td></td>
        <td rowspan="2">大学生心理健康(15:50)
        <td rowspan="2">大学生体育(气排球初级)
        <td></td>
    </tr>
    <tr>
        <td>8</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="4">晚上
        <div style="text-align: center;">
            <img src="https://goss.veer.com/creative/vcg/veer/800water/veer-124769567.jpg" width="50px" height="50px" >
        </div>
        <td>9</td>
        <td rowspan="2">形式与政策18:30-20:10
        <td rowspan="2">大学生职业生涯规划(18:30)
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>10</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>11</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>12</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>实践课程 ：军事技能李锐(共3周)/10-12周</td>
        <td rowspan="2" colspan="8" style="font-size: 48px;font-family:'ZoomlaTangYin-A053';">人生得意须尽欢，莫使金樽空对月。&nbsp;&nbsp;&nbsp;&nbsp;
            天生我材必有用，千金散尽还复来。
    </tr>
    <tr>
        <td>讲课：实验：实训：实践</td>
    </tr>
    </table>
</body>
</html>

2.图片效果：

img

源代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
<script>   
function getDateTime() {  
    var now = new Date();  
    var date = now.getFullYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日";  
    var hours = now.getHours();  
    var minutes = now.getMinutes();  
    var seconds = now.getSeconds();  
    return date + " " + hours + ":" + minutes + ":" + seconds;  
} 

function updateTime() {  
    var timeElement = document.getElementById("demo");  
    timeElement.innerHTML = getDateTime(); 
}  
setInterval(updateTime, 1000);    
</script>  
    <table border="10px solid " align="center" class="abc">
        <caption style="border: 5px solid;">课程表</caption>
        <th id="demo" colspan="9"></th>
        <tr>
            <th>时间段</th>
            <th>节次</th>
            <th>星期一(Monday)</th>
            <th>星期二(Tuesday)</th>
            <th>星期三(Wednesday)</th>
            <th>星期四(Thursday)</th>
            <th>星期五(Friday)</th>
            <th>星期六(Saturday)</th>
            <th>星期七(Sunday)</th>
        </tr>
        <tr>
            <td rowspan="4" >上午
            <div style="text-align: center;">
            </div>
            <td >1</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
        <td rowspan="4">下午
        <td>5</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>7</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>8</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="4">晚上
        <td>9</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>10</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>11</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>12</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td rowspan="2" colspan="8">&nbsp;&nbsp;&nbsp;&nbsp;
    </tr>
    <tr>
        <td></td>
    </tr>
    </table>
</body>
</html>

3.HTML制作表格的基本属性包括：

border：设置表格边框的宽度。

cellpadding：设置单元格边缘与其内容之间的空白。

cellspacing：设置单元格之间的空白。

colspan：定义单元格应跨越多少列。

rowspan：定义单元格应跨越多少行。

align：设置单元格内数据的对齐方式，默认为left左对齐，可以设置right右对齐和center居中对齐。

width：设置表格的宽度，可以为绝对值，也可以是一个百分比相对值，推荐设置为相对值，以自适应数据变化。

height：设置表格的高度。

在HTML中创建表格的基本原则是：先创建行，再划分列。一行一列叫一个单元格，用户数据必须全部放在单元格中。创建行使用标签，创建列使用标签，标题用。

4.HTML样式中的属性有很多种，以下是一些常见的HTML样式属性：

color：设置文本颜色。

background-color：设置背景颜色。

font-size：设置字体大小。

font-family：设置字体类型。

font-weight：设置字体粗细。

font-style：设置字体样式。

text-decoration：设置文本装饰（如下划线、上划线、删除线等）。

ext-align：设置文本对齐方式（如左对齐、右对齐、居中等）。

margin：设置元素的外边距（上下左右）。

padding：设置元素的内边距（上下左右）。

border：设置元素的边框（上下左右）。

width 和 height：设置元素的宽度和高度。

background-image：设置元素的背景图片。

background-repeat：设置背景图片是否以及如何重复。

background-position：设置背景图片的位置。

display：定义元素应如何显示（块级元素、行内元素、列表项等）。

position：定义元素的定位类型（静态、相对、绝对、固定或粘性）。

top, right, bottom, left：用于定位元素（与 position 属性一起使用）。

z-index：用于设置元素的堆叠顺序（哪个元素应该位于顶部，哪个元素应该位于底部）。

visibility：定义元素是否应该被显示，或者元素是否在页面上可见。

以上只是一些常见的HTML样式属性，还有很多其他的属性可以根据需要进行使用。

以上内容仅供参考使用

...全文
32 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
编程小白福音系列之HTML+CSS入门教程
本教程专门针对编程小白而制作，是学习HTML+CSS很好的入门教程。从H5的行业介绍开始，通过创建一个博客、模仿百度新闻列表、百度云盘、登录表单等实战案例来讲解HTML及CSS知识；讲师以完美的逻辑思维分析案例讲解案例，不仅简单易懂，同时又让同学们记忆深刻，学完课程能够轻松制作出你看到的静态页面；知识点涵盖：·HTML入门、文本、图像、链接、表格、列表、表单、盒模型等基础知识。 ·CSS基础语法、文本属性、段落属性、背景属性、布局、选择器、浮动与定位、CSS浏览器兼容性、动画、过渡、2D/3D、CSS优化等知识点。
html 简单表格制作（看了它足以应对大部分表格）
首先制作一个表格我们要知道一张简单表格是由二部分组成分别是表头，表身。 下面就是一个简单的表格。 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。如下图 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <...
如何用html制作一个简单的网页
如何用html制作一个简单的网页
怎么制作一个HTML表格
HTML - 学习怎么做一个表格 表格在前端里是比较基础的，百米高楼平地起，所以我们更要掌握表格。 我们先看一下效果，表格包括表格标题、表头、表格内容、表格尾部内容，我们从头到尾看一下这个表格是怎么做出来的。 一：表格标签 table主要有以下属性： table由tr和td标签实现单元格的内容实现 二：标题标签 caption caption标签默认让标题在表格上面居中，不过没有加粗变黑效果，所以我们需要用一个标题标签实现这个效果。 三：表头标签 thead thead标签也是默认让表头
使用HTML制作一个简单的个人主页
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
闽江学院

480

社区成员

255

社区内容

发帖
与我相关
我的任务
社区描述
闽江学院IT领域专业的学生社区
社区管理员
  • c_university_1157
  • 枫_0329
  • 傅宣
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章