前言

上一篇是表格的基本结构标签和一些属性以及怎么样合并单元格，这篇博客就来具体练习一下table的使用

`1.`

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">td{text-align: center;font-size: 24px;}</style></head><body><table border="1" cellspacing="0" cellpadding="60px"><tr><td>名次</td><td colspan="3">分数</td><td>总分</td><td>奖金</td></tr><tr><td>第一名</td><td>80</td><td>90</td><td>100</td><td>270</td><td>200</td></tr><tr><td>第二名</td><td>95</td><td>85</td><td>95</td><td>275</td><td>230</td></tr><tr><td colspan="5">奖金总计</td><td>430</td></tr></table></body>
</html>

`2.`

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">td{text-align: center;}</style></head><body><h1 style="letter-spacing:7px;" align="center">四年级3班&ensp;课程表</h1><table border="1"   cellspacing="0" height="600px" align="center"><tr><td colspan="2"></td><td valign="top">星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td></tr><tr><td rowspan="5">&ensp;上<br>午</td><td>7:50--8:20</td><td valign="top">单老师</td><td valign="top">单老师</td><td valign="top">唐老师</td><td valign="top">凌老师</td><td valign="top">单老师凌<br>老师</td></tr><tr><td>8:20--8:35</td><td colspan="5" align="center">晨会课</td></tr><tr><td>8:40--9:20</td><td>数学</td><td>语文</td><td>语文</td><td>语文</td><td>音乐</td></tr><tr><td>9:30--10:10</td><td>英语</td><td>数学</td><td>体育</td><td>数学</td><td>语文</td></tr><tr><td>10:35--11:20</td><td>英语</td><td>语文</td><td>数学</td><td>语文</td><td>综合2</td></tr><tr><td></td><td>中自习</td><td>单老师</td><td>卞老师</td><td>凌老师</td><td>凌老师</td><td>凌老师</td></tr><tr><td rowspan="5">下<br>午</td><td>综合1</td><td>英语</td><td>英语</td><td>综合1</td><td>语文</td><td>语文</td></tr><tr><td>1：00--1:40</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td></tr><tr><td>1：50--2:35</td><td>综合3</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td></tr><tr><td>2:45--3:25</td><td>品德与社<br>会</td><td>体育</td><td>品德与社<br>会</td><td>班队</td><td>科学</td></tr><tr><td>3:40-4:00</td><td colspan="5" align="center">兴趣课</td></tr><tr><td></td><td></td><td>唐老师</td><td>单老师</td><td></td><td>卞老师</td><td>卞老师</td></tr></table></body>
</html>

`3.`

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">
td{text-align: center;}</style></head><body><table border="1"  cellspacing="0" width="400px" rules="all"><tr bgcolor="lawngreen"><td colspan="2">星期</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td></tr><tr bgcolor="yellow"><td colspan="7">早读</td></tr><tr><td rowspan="4" bgcolor="hotpink">上午</td><td bgcolor="hotpink">1</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td bgcolor="hotpink">2</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td bgcolor="hotpink">3</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td bgcolor="hotpink">4</td><td></td><td></td><td></td><td></td><td></td></tr><tr bgcolor="yellow"><td colspan="7" >午休</td></tr><tr><td rowspan="4" bgcolor="hotpink">下午</td><td bgcolor="hotpink">5</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td bgcolor="hotpink">6</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td bgcolor="hotpink">7</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td bgcolor="hotpink">8</td><td></td><td></td><td></td><td></td><td></td></tr><tr bgcolor="yellow"><td colspan="7">晚修</td></tr></table></body>
</html>

`4.`

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">tr{text-align: center;}</style></head><body><p align="center" style="font-size: 32px;">产品价格</p><table border="" cellspacing="0" cellpadding="40" rules="rows" width="1000px"><tr bgcolor="#d5ebeb"><th>套餐名称</th><th>查询次数</th><th>调用频率</th><th>有效时间</th><th>价格</th></tr><tr><td>试用套餐</td><td>500次</td><td>2次/秒</td><td>1月</td><td>0元</td></tr></table></body>
</html>

`5.`

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">table{text-align: center;}</style></head><body><h3 align="center">课程表</h3><table border="3" bordercolor="royalblue" align="center"><tr><td>项目</td><td colspan="5">上课</td><td colspan="2">休息</td></tr><tr><th bgcolor="pink">星期</th><th bgcolor="pink">星期一</th><th bgcolor="pink">星期二</th><th bgcolor="pink">星期三</th><th bgcolor="pink">星期四</th><th bgcolor="pink">星期五</th><th bgcolor="pink">星期六</th><th bgcolor="pink">星期日</th></tr><tr><td rowspan="4">上午</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td rowspan="4">休息</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">下午</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></body>
</html>

总结

以上就是五个关于表格的案例更新，多看多写

HTML表格标签的案例相关推荐

小说排行榜案例（表格标签）
表格标签表格是用来显示,展示数据的(也可以说是布局页面的) <table>定义表格<tr>定义行<tb>定义表格内的数据</tb></tr> ...
表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例
表格标签表格主要用于展示数据 <table><tr><td>单元格内的文字</td>...</tr>... </table> ...
HTML 表格标签、列表标签、表单标签（案例：注册页面）
1. 表格标签表格是实际开发中非常常用的标签: 1. 表格的主要作用 2. 表格的基本语法 1.1 表格的主要作用表格主要用于显示.展示数据,因为它可以让数据显示的非常的规整,可读性非常好.特别是 ...
青春不常在，抓紧谈恋爱小案例,表格标签、列表标签、表单标签的综合练习
青春不常在,抓紧谈恋爱小案例里面要用到的知识点: <select>下拉列表. <ul>无序列表. 表格标签 <table> </table>是用于定义表 ...
表格标签案例---个人简历
表格标签应用 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
html 表格_【HTML】3 表格标签
1.表格标签表格主要作用:用于显示.展示数据,可以让数据显示的非常规整,可读性好. 2.表格属性注:此处是为了更直观看到表格的样子,理解基本属性的作用,实际应用中,样式属性多在CSS中设置. 3. ...
HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一.排版标签 1.标题标签在新闻和文章的页面中都离不开标题,用来突出显示文章主题. h系列标题 <body><h1>1级标题</h1> <h2>2级标 ...
列表标签,表格标签,表单标签
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
Web学习第二天——HTML的基本标签（媒体标签、链接标签、列表标签、表格标签、表单标签）
第二天 HTML的常用标签(媒体标签.链接标签.列表标签.表格标签.表单标签) 一.媒体标签 (一).图片标签(img) 标签格式及属性介绍 (二).音频标签(embed.audio) embed标签 ...

HTML表格标签的案例

前言

`1.`

`2.`

`3.`

`4.`

`5.`

总结

HTML表格标签的案例相关推荐

最新文章

热门文章