关于HTML的两个实例

简介: 例子一:使用HTML语言编写一个菜单代码如下: 菜谱 星期一菜谱 素菜 清炒茄子 花椒扁豆 小葱豆腐 炒白菜 ...

例子一:使用HTML语言编写一个菜单

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>菜谱</title>
</head>
<body>
<table border="1">
    <tr>
        <th colspan="5">星期一菜谱</th>
    </tr>
    <tr>
        <th rowspan="2">素菜</th>
        <th colspan="3">清炒茄子</th>
        <th>花椒扁豆</th>
    </tr>
    <tr>
        <th colspan="3">小葱豆腐</th>
        <th>炒白菜</th>
    </tr>
    <tr>
        <th rowspan="2">荤菜</th>
        <th colspan="3">油闷大虾</th>
        <th>海参鱼翅</th>
    </tr>
    <tr>
        <th colspan="3">红烧肉</th>
        <th>烤全羊</th>
    </tr>
</table>
</body>
</html>

例子二:使用HTML语言编写一个课程表

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
<table border="1">
    <tr>
        <th>项目</th>
        <th colspan="5" >上课</th>
        <th colspan="2">休息</th>
    </tr>
    <tr>
        <th>星期</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
        <th>星期日</th>
    </tr>
    <tr>
        <th rowspan="4">上午</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>英语</th>
        <th>物理</th>
        <th>计算机</th>
        <th rowspan="4">休息</th>
    </tr>
    <tr>
        <th>数学</th>
        <th>数学</th>
        <th>地理</th>
        <th>历史</th>
        <th>化学</th>
        <th>计算机</th>
    </tr>
    <tr>
        <th>化学</th>
        <th>语文</th>
        <th>体育</th>
        <th>历史</th>
        <th>地理</th>
        <th>计算机</th>
    </tr>
    <tr>
        <th>政治</th>
        <th>英语</th>
        <th>体育</th>
        <th>历史</th>
        <th>地理</th>
        <th>计算机</th>
    </tr>
    <tr>
        <th rowspan="2">下午</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>英语</th>
        <th>物理</th>
        <th>计算机</th>
        <th rowspan="2">休息</th>
    </tr>
    <tr>
        <th>数学</th>
        <th>数学</th>
        <th>地理</th>
        <th>历史</th>
        <th>化学</th>
        <th>计算机</th>
    </tr>

</table>
</body>
</html>
目录
相关文章
|
6月前
|
移动开发 前端开发 JavaScript
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(下)
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(下)
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(下)
|
4月前
html中img图片进行等比例缩放的实例代码
HTML中,要修改img元素定义的图片的大小,且是等比例缩放,不改变宽和高的比值,那么可以采用只设置img元素属性中width和height中的任何一个,不要同时设置两个即可实现img图片的等比例缩放效果。下面将通过两个实例来分别实现这两种方法。
84 1
|
4月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
55 0
|
6月前
|
Web App开发 移动开发 前端开发
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(上)
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】
|
9月前
|
移动开发 前端开发 JavaScript
Html5 Canvas绘图实例
Html5 Canvas绘图实例
63 0
|
9月前
|
PHP
smarty模版引擎在HTML中常用的循环实例解决方案
smarty模版引擎在HTML中常用的循环实例解决方案
33 0
|
11月前
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
164 0
|
11月前
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(下)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(下)
167 0
|
11月前
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
17589 10
|
11月前
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(下)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(下)
167 0