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

2023-11-19 13:06:56 107 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›
xiao(づ ●─● )づou xiao(づ ●─● )づou 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 + 加入社区
unity之——解决利用Jenkins在Windows环境下打包unity工程中的场景为apk包，打包打不出来的问题。并且介绍Jenkins从安装到环境配置，调用unity代码的过程（填坑）！！！！！ 今天第一次接触Jenkins，比较头疼。网上的Jenkins配置环境相关的资料比较散乱，并且在Windows平台下相关的配置更是少之又少。我在这里讲一下从Jenkins安装到构建工程。打包unity工程的apk包的过程。 1.首先去Jenkins官网下载安装就不说了，安装完成之后在浏览器中输入http://localhost:8080（默认访问地址）进入Jenkins web界面。进行账号的注册... 阅读详情

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样式属性，还有很多其他的属性可以根据需要进行使用。

以上内容仅供参考使用

...全文
独立站如何采集商品？外贸独立站采集教程 从这里Robert了解到还有国内有很多仿牌卖家、微商，都有类似的情况，他们出海的阻碍主要在于支付、物流、推广。8.插件“抓取任务”列表手动点同步，将商品同步到主商城后台商品管理列表（商品默认同步到下架列表中） 后台商品管理下架列表显示已同步商品。5.店铺信息修改完成后，可以开始采集商品，采集时弹窗中会自动识别当前平台及商品链接，分类和相册名称可以自定义 编辑修改。4. 打开采集目标站商品页面，点开谷歌浏览器扩展程序列表，找到Shopyy采集平台，打开配置页。打开弹窗中的“店铺管理”，添加店铺信息。 阅读详情

相关推荐

html制作简单的表格源码.zip

本压缩包"html制作简单的表格源码.zip"提供了关于HTML表格创建的实例，包括源代码和最终显示效果。在"index.html"文件中，你将看到HTML表格的基本结构。

.whl

HTML简单表格制作（购物）

HTML简单表格制作（购物）

濛甜

html制作细线表格的简单实例

HTML表格是网页设计中常用的元素，用于展示结构化数据。在制作细线表格时，我们需要对HTML表格的一些属性进行精细调整，以达到理想中的视觉效果。以下是对细线表格制作原理的详细解释。

weixin_38543293

spreadsheet-simple:使用html和vanilla js制作的简单电子表格，无需任何框架

标题中的"spreadsheet-simple"项目是一个使用HTML5、CSS3以及纯JavaScript（即vanilla js）构建的轻量级电子表格实现。

水瓶座的兔子

HTML.rar_html网页制作

本示例将详细介绍如何使用HTML来制作一个简单的表格。首先，我们从基础开始。HTML文档的基本结构由`<!DOCTYPE html>`声明开始，它告诉浏览器文档类型。

Janice Lu
评论
收藏 已收藏
分享
返回顶部
xiao(づ ●─● )づou
xiao(づ ●─● )づou
闽江学院 488 成员 284 内容
+ 加入社区