【前端开发之旅】简单实用HTML制作表格

代码实现效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><table><caption>课程表</caption><tr><td colspan="1" rowspan="1">项目</td><td colspan="5" rowspan="1">上课</td><td colspan="2" rowspan="1">休息</td></tr><tr><td colspan="1" rowspan="1">星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr><td rowspan="4" colspan="1">上午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="4" colspan="1">休息</td></tr><tr><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr><tr><td>化学</td><td>语文</td><td>体育</td><td>计算机</td><td>英语</td><td>计算机</td></tr><tr><td>政治</td><td>英语</td><td>体育</td><td>历史</td><td>地理</td><td>计算机</td></tr><tr><td rowspan="2" colspan="1">下午</td><td>语文</td><td>数学</td><td>英语</td><td>物理</td><td>计算机</td><td>英语</td><td rowspan="2">休息</td></tr><tr><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr></table><style>table {width: 800px;height: 400px;text-align: center;border-collapse: collapse;border: 5px double brown;table-layout: auto;empty-cells: hide;}table tr th,table tr td {border: 5px double brown;}</style></body></html>```

注意事项：

本次代码并不难，把握好colspan、rowspan的含义和HTMl语言基本用法划分表格就可以了。

【前端开发之旅】简单实用HTML制作表格相关推荐

excel一列求和_超级简单实用excel制作表格，手把手教学（适合无根基初学者）...
我拉网,专注办公模板设计 Excel表格为最常用办公表格吗,其制作在如今工作生活中是最常用到的,重要性可以说和会识字写字一样.如果你一点不会excel制作,没关系,今天我们就以制作一个"成绩 ...
html表格制作旅游网页,简单实用的网页表格特效_html
在我们制作主页的过程中,用到表格的地方非常多,灵活运用表格技巧可以为我们的网页增色不少,这里我就详细介绍几中特效表格的制作方法. 一.彩色虚线表格 .tab1 { border-top-width: ...
前端开发[html+css]的实用网站分享（一）
目录 1.Glassmorphism 玻璃特效生成器 2卡片快速生成器 3.button按钮集合 1.Glassmorphism 玻璃特效生成器 Glassmorphism generator 玻璃特 ...
html5艺术字效果,WEB前端开发，网络特殊字体的制作工具-font-spider
font-spider 前端开发字体的好工具 HTML5学堂:font-spider是业界首款中文 WebFont 本地自动化压缩与转码工具.利用它不但能帮你轻松解决字体文件的兼容问题,并能自动检索找 ...
前端开发常用，好看实用的PC端UI库
1. Element Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 https://github.com/ElemeFE/element Git ...
Asp.net开发之旅--简单的引用母版页
最近在做毕业设计的时候,总是为页面的美观烦恼,想要页面都是一个风格的,朋友提示我有母版页,以前没用过,最近第一次用,不谈怎么引用母版页中的控件什么的,就谈谈怎么简单的将母版页引用到已经写好的页面中: ...
es6 数组合并_九个前端开发必学超级实用的 ES6 特性
1.展开操作符顾名思义,用于对象或数组之前的展开操作符(-),将一个结构展开为列表. 这种写法够优雅,够简洁吧?如果不用展开操作符我们得这么写: 展开操作符也适用于合并对象的属性: 不用展开操作符 ...
fastadmin的二次开发教程【简单搭建、多表格问题，API开发】
2020年搭建: 1.简单搭建模块,不推荐用官方的一键搭建新模块,看不懂还容易出错圈圈是重点,搭建新模块五点缺一不可,少了就得打屁屁了. 2.简单教程 (1)关于页面有上角生成的导出,切换,列.搜索 ...
vue 简单实用的elementUI表格封装
在写这个表格组件之前,要了解 slot 插槽的使用. 目录子组件:子组件调用父组件的方法 this.$parent.方法名 1. 父组件(普通表格): 2. 父组件(表格中的某一项数据需要修改) 3 ...

【前端开发之旅】简单实用HTML制作表格

【前端开发之旅】简单实用HTML制作表格相关推荐

最新文章

热门文章