HTML5 第七章 表格

最新推荐文章于 2019-12-18 19:40:40 发布
最新推荐文章于 2019-12-18 19:40:40 发布
阅读量365 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dayanjun/article/details/52686681
版权
HTML5   第七章 表格


Dome 01 表格
<html>
<head>
<title>表格</title>
</head>


<body>
<h3>表格案例</h3>
<table width="600" height="100" align="center" border="1" 
bordercolor="#339900" cellspacing="2" cellpadding="2" 
bgcolor="#0033FF" background="images/3.jpg">

    <caption>表格的标题</caption>
    <tr>
        <th>表格的表头一</th>
            <th>表格的表头二</th>
        </tr>
<tr>
        <td>这是表格中的第一个单元格</td>
            <td>第一行中的第二个单元格</td>
        </tr>
        <tr>
        <td>这是表格的第二行</td>
            <td>第二行中的第二个单元格</td>
        </tr>
</table>
</body>
</html>


//align对其有left左对齐，center居中对齐，right右对齐
//border 边框 单位像素 默认值为0，不显示
//bordercolor 默认颜色灰色
//cellspacing 内框宽度：单元格间的宽度  单位像素
//cellpadding 文字与边框的间距  单位像素
//bgcolor 背景颜色 
//background  背景图像




Dome 02  行


<html>
<head>
<title>无标题文档</title>
</head>


<body>
<h3>行案例</h3>
<table border="1" bordercolor="#00CC33" cellpadding="5" height="200">
    <caption align="bottom">某公司员工工资</caption>
<tr height="300" bgcolor="#33FFFF"> //无变化
        <th>姓名</th>
            <th>基本工资</th>
<th>岗位工资</th>
            <th>绩效工资</th>
            <th>工龄工资</th>            
        </tr>
        <tr bordercolor="#FF0000" valign="top">
        <td>李1</td>
            <td>1000</td>
            <td>600</td>
            <td>800</td>
            <td>400</td>
        </tr>
        <tr align="right">
        <td>王2</td>
            <td>1500</td>
            <td>800</td>
            <td>600</td>
            <td>300</td>
        </tr>
</table>
</body>
</html>


//valign 垂直对齐 top靠上  middle居中  bottom靠下
//align 表格标题对齐 top靠上   bottom靠




Dome 03 单元格


<html>
<head>
<title>无标题文档</title>
</head>


<body>
<h3>单元格案例</h3>
<table width="500" border="1" bordercolor="#00CC33" cellpadding="5">
    <caption align="bottom">某公司员工工资</caption>
<tr align="center">
        <td colspan="5">工资单</td>
        </tr>
        <tr height="60"> //无变化
        <th width="60" height="60">姓名</th>
            <th>基本工资</th>
<th>岗位工资</th>
            <th>绩效工资</th>
            <th>工龄工资</th>            
        </tr>
        <tr bordercolor="#FF0000" valign="top">
        <td>李1</td>
            <td width="100" height="40">1000</td>
            <td>600</td>
            <td bordercolorlight="#0000FF">800</td>
            <td bordercolordark="#FFFF00">400</td>
        </tr>
        <tr>
        <td  rowspan="2">王2</td>
            <td>1500</td>
            <td>800</td>
            <td bordercolor="#0000FF">600</td>
            <td bgcolor="#CC0033">300</td>
        </tr>
        <tr>
            <td height="50">1200</td>
            <td align="center">800</td>
            <td valign="bottom">600</td>
            <td background="images/1.jpg">300</td>
         </tr>
</table>
</body>
</html>


//colspan 水平跨度
//rowspan 垂直跨度
//bordercolorlight  亮边框：右边和底部变色
//bordercolordark   暗边框：左边和上边变色




Dome 04 表格的结构


<body>
<h3>表格的结构</h3>
<table align="center" border="1" bordercolor="#FFCC99" cellpadding="3" width="550" height="180">
    <caption>某单位物品管理表</caption>
    <thead bgcolor="#FF0000" align="center" valign="middle">
    <tr>
    <th>物品名</th>
        <th>类型</th>
        <th>领取人</th>
        <th>所属部门</th>
        <th>数量</th>
    </tr>
    </thead>
    <tbody bgcolor="#CC99CC" align="left" valign="bottom">
    <tr>
        <td>圆珠笔</td>
            <td>文具</td>
            <td>李小米</td>
            <td>PHP</td>
            <td>1</td>
        </tr>
        <tr>
        <td>鼠标</td>
            <td>电脑配件</td>
            <td>潘晓东</td>
            <td>ASP.NET</td>
            <td>2</td>
        </tr>
        <tr>
        <td>打印纸</td>
            <td>办公耗材</td>
            <td>刘小欣</td>
            <td>JAVA</td>
            <td>30</td>
        </tr>
    </tbody>
    <tfoot bgcolor="#993300" align="right" valign="middle">
    <tr>
    <td colspan="5">表格创建日期：2011-11-20</td>
    </tr>
    </tfoot>    
    </table>
</body>
</html>




Dome 05 表格嵌套


<body>
<!--表格嵌套 -->
<table width="560" height="300" border="1" cellpadding="0" align="center">
<thead bgcolor="66FFFF">
<tr height="70">
    <td width="160">网站logo</td>
        <td width="400">网站banner</td>
    </tr>
</thead>
<tbody>
<tr valign="top" height="200">
    <td width="160" align="center">
        <table width="135" height="180" border="1" cellspacing="0" bgcolor="#FFCCFF">
        <tr>
            <td>页面导航一</td>
            </tr>
            <tr>
            <td>页面导航二</td>
            </tr>
            <tr>
            <td>页面导航三</td>
            </tr>
            <tr>
            <td>页面导航四</td>
            </tr>
        </table>
        </td>
        <td width="400" height="200" background="images/1.jpg">
        <table width="380" height="160" border="1" bordercolor="#CC9933" cellspacing="2" cellpadding="5">
        <tr>
            <td>网站板块一</td>
                <td>网站板块二</td>
           </tr>
           <tr>
            <td>网站板块三</td>
                <td>网站板块四</td>
           </tr>
         </table>
         </td> 
</tbody>
<tfoot bgcolor="#66FFFF">
<tr align="center">
    <td height="30" colspan="2"><font color="#FF0000">版权信息</font></td>
    </tr>
</tfoot>
</table>
</body>
</html>
cyuanzhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 第七章浮动课后作业
tb19930719的博客
06-24 6735
HTML5 第七章浮动课后作业 制作摄影社区热门小镇 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;摄影社区热门小镇&lt;/title&gt; &lt;style&gt;
HTML第七章上机练习一
qq_36074163的博客
10-19 4321
北大青鸟网站导航 #c{border-width:1px; border-style:solid; width:870px;margin:0px auto;} .a{float:left;} .b{float:right;} ul,li{float:left;list-style-type:none; background-color:black; color:white; font-weig
北大青鸟ACCP5.0第一学期HTML课程第七章上机阶段+作业源代码
09-09
北大青鸟最新5.0第一学期HTML课程第七章作业，上机阶段源代码+简答题，images文件夹里为素材，供大家学习参考。
HTML上机练习
08-18
北大青鸟 S2 HTML上机练习
HTML第七章
12-12
accp8.0第七章..............................................................................................................................................................................................................................................................................................................
07HTML5学习之表格
weixin_43762330的博客
12-18 270
文章目录1 表格概览1.1 表格元素1.1.1 border属性1.1.2 表格标题2 表格行、单元格与表头2.1 表格行元素2.2 表格数据元素2.3 表格表头元素3 跨行和跨列3.1 colspan属性3.2 rowspan属性4 配置一张可无障碍访问的表格5 用CSS设置表格样式 1 表格概览   使用表格的目的在于组织信息。 表格定义从<table>标签开始，</tab...
HTML5+CSS3网页设计-第七章 浮动.pptx
最新发布
12-21
HTML5和CSS3是现代网页设计的两大核心技术，它们提供了丰富的功能和强大的样式控制能力，使得网页设计更加灵活和多样化。在本章“浮动”中，我们将深入理解浮动（float）这一概念及其在网页布局中的应用。 首先，...
第七章网页设计与网站建设基础.ppt
11-12
5. 特殊效果 用户可以使用“滚动字幕”功能为网页添加特殊效果。 6. 网页的属性设置 网页的属性包括网页的标题、位置、背景、页边距和语言等重要信息。用户可以使用“常规属性设置”命令来设置网页的标题、位置、...
HTML第7章 课堂练习 及答案 CSS ACCP6.0
05-08
在"Chapter07"这个压缩包文件中，我们可以预期找到与HTML第7章相关的练习题和解答，这可能包括了HTML的基本标签使用、表格、段落、标题、图像的嵌入、链接的创建，以及CSS的选择器、属性和盒模型等内容。练习题目...
HTML5知识点思维导图(手工整理）
10-16
HTML5是超文本标记语言的最新版本，它在网页开发领域扮演着至关重要的角色，提供了丰富的功能和元素来创建更具交互性和结构性的网页。以下是一些核心的HTML5知识点： 1. **基本结构与标签**：HTML5文档的基础是`<!...
HTML第7章 课堂练习 PPT及答案 CSS.ACCP6.0
05-10
HTML第7章 课堂练习 PPT及答案 CSS.ACCP6.0
html5 练习代码
04-23
html5 练习代码 入门学习使用 简单实用
S2-3使用JavaScript增强交互效果第七章到第十章课件及课后作业答案
11-26
JavaScript的ppt、上机答案和课后答案
北大青鸟6.0HTML第二章作业
09-13
【北大青鸟6.0HTML第二章作业】是北大青鸟S16.0课程体系中HTML学习的第二章节的作业参考资料，旨在帮助学员深入理解和掌握HTML的基本概念、语法以及应用技巧。在这个阶段，学员将从初级的HTML标签使用逐步过渡到更...
HTML第七章上机练习1
qq_36074064的博客
10-19 3243
北大青鸟 首页 青鸟知识库 青鸟论坛 学员问答 青鸟圈子 时时课堂 客户端下载 帮助中心 @charset "gb2312"; /* CSS Document */ body, div, ul, li {margin:0px;padding:0px;} body {background-color:#FFF;} img {border:0px;} ul, li {list-styl
HTML第七章上机练习2
qq_36074043的博客
10-19 3414
北大青鸟视频宣传列表 body{ line-height:20px; font-size:12px; background-color:#999;} .sll { font-weight: bold; background-color:#036; width:600px; height:50px; color:#FFF; font-size: 3
ACCPHTMLS1第七章上机练习1
baidu_36074048的博客
10-19 3563
无标题文档 li{ list-style-type:none; width:100px; float:left; } a{ background:url(../Desktop/forumMenuBg.gif) 0px 0px no-repeat; text-decoration:none; display:block; text-align:center; color:#FFF;
第七章上机答案
qq_36074157的博客
01-25 2592
----------------------------------------------------------上机一 USE MySchool GO --查看表Student中列的信息 EXEC sp_columns Student --查看表Student的所有信息 EXEC sp_help Student --查看表Student的约束 EXEC sp_helpconstraint
html5学习笔记7-第二章上机（之二）
qilixiaoshi的专栏
02-25 952
一、颜色渐变的按钮 /*按钮*/ .button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px;
"第七章网页设计与网站建设基础
通过学习第七章《网页设计与网站建设基础》，我们应该掌握了FrontPage 2000的窗口组成和视图模式，学会了创建网站和网页，插入和编辑图片、表格、多媒体信息等内容，并且了解了创建框架网页和表单的方法。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值