重拾html-7-070125

最新推荐文章于 2018-08-28 10:16:38 发布
原创 最新推荐文章于 2018-08-28 10:16:38 发布 · 766 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#border #table
本文详细介绍如何使用HTML创建和设计表格，包括基本结构、合并单元格、对齐设置、背景及框线设定等，并提供示例代码。

4.9 表格标签 <回细说索引>

【网页中的表格观念】

举个例子来说，如果今天我们要做一个3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好几个步骤的，第一个步骤，利用<TABLE></TABLE>标签告诉电脑我要做一个表格；第二个步骤，利用一组<TR></TR>标签先做一个横列，然后在横列中利用三组<TD></TD>标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系，以下咱们就来慢慢的看个仔细：

 

  1. 首先我们来看一个最简单的表格：

    原始码呈现结果
    <TABLE BORDER=1>
    <TR><TD>1</TD></TR>
    </TABLE>
    1

    利用<TABLE>这个标签来告诉电脑，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组<TR></TR>是设定一横列的开始。一组<TD></TD>则是设定一个栏位。当然，文字就是要摆在这里面。

     

  2. 现在我们再来增加二个格子：

    原始码呈现结果
    <TABLE BORDER=1>
    <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
    </TABLE>
    123

     

  3. 看见没有，<TR></TR>没有增加，<TD></TD>却增加了二组。那如果我要再加上一列呢？很简单，就像这样：

    原始码呈现结果
    <TABLE BORDER=1>
    <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
    <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
    </TABLE>
    123
    456

     



【合并表格栏位】

 

  1. 并非所有的表格都是规规矩矩的只有几栏、几列而已，有时候，我们还会希望能够“合并栏位”，让表格更美观、更实用一点，而谈到“合并栏位”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是横列间的合并），一种是左右合并（也就是直栏间的合并），这两种合并方式各有不同的属性设定方法。

     

  2. 左右栏位合并：基本上，您的表格已经学会啰！接下来，咱们就来看看，如何将 1、2、3 格通通合并变成一大格：

    原始码呈现结果
    <TABLE BORDER=1>
    <TR><TD COLSPAN=3>1</TD></TR>
    <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
    </TABLE>
    1
    456

    您应该会发现，怎么2、3都消失了？只剩下1，而且该栏的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右栏位合并”的属性，COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”，也正因如此，本来的两个<TD>都可以省掉了，因为都被并掉了嘛！

     

  3. 上下栏位合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将 1、4格通通合并变成一大格：

    原始码呈现结果
    <TABLE BORDER=1>
    <TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
    <TR><TD>5</TD><TD>6</TD></TR>
    </TABLE>
    123
    56

    有了上一次的经验后，我们就知道，要合并栏位就一定有些栏位会被“牺牲”掉（也就是那些被合并的栏位啦！），这次我们要“上下合并”，我们将1与4合并成一个栏位，那么被牺牲的是哪一个栏位呢？没错就是下面那一个倒楣的4，我们看看上图，果然4已经删掉了，而在1的<TD>标签中则多了个生面孔ROWSPAN，这就是“上下栏位合并”的属性，ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”，其结果如下：

     

     



【表格栏位对齐位置设定】

 

  1. 我可以自己设定表格的大小吗？当然可以，您可以自由设定表格的“宽”及“高”喔！我们来制作一个宽100、高60的表格，做法如下：

    原始码呈现结果
    <TABLE WIDTH="100" BORDER="1" HEIGHT="60">
    <TR><TD>1</TD></TR>
    </TABLE>
    1

     

  2. 哎呀！怎么 1 老是在表格的左边呢？可以弄到中间吗？当然可以，只要在<TD>加入 ALIGN=CENTER 这参数即可：

    原始码呈现结果
    <TABLE WIDTH="100" BORDER="1" HEIGHT="60">
    <TR><TD ALIGN=CENTER>1</TD></TR>
    </TABLE>
    1

    此外，利用 ALIGN=RIGHT可以让表格中物件置右、利用 ALIGN=LEFT可以让表格中物件置左（预设值），至于为什么要加在<TD>中呢？因为，<TD>是一个栏位的意思，我们要指定在这栏位中的东西要置中或置左置右，就必须将ALIGN加在<TD>中。

     

  3. 既然可以置中，那么也可以控制表格内文字靠上方、靠下方吗？可以的，只要利用 VALIGN=TOP 这种属性即可让表格内物件靠上方对齐。

    原始码呈现结果
    <TABLE WIDTH="100" BORDER="1" HEIGHT="60">
    <TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>
    </TABLE>
    1

    利用VALIGN=MIDDLE可以让表格中物件垂直置中（预设值），VALIGN=BOTTOM可以H让表格中物件靠下方。

     

     

【表格背景、底色设定】

 

  1. 那么表格可以设定底色吗？可以的不但表格可以，您也可以指定某栏或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色码"就行了。底下是指定整格表格背景颜色的方法：

    原始码呈现结果
    <TABLE BORDER="1" BGCOLOR=#FFCC33>
    <TR><TD>1</TD><TD>2</TD></TR>
    <TR><TD>3</TD><TD>4</TD></TR>
    </TABLE>
    12
    34

    将BGCOLOR="颜色码"加在<TR>中，可以指定“一列”的背景颜色：

    原始码呈现结果
    <TABLE BORDER="1" >
    <TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
    <TR><TD>3</TD><TD>4</TD></TR>
    </TABLE>
    12
    34

    将BGCOLOR="颜色码"加在<TD>中，可以指定“一栏”的背景颜色：

    原始码呈现结果
    <TABLE BORDER="1" >
    <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
    <TR><TD>3</TD><TD>4</TD></TR>
    </TABLE>
    12
    34

     

  2. 表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要将BACKGROUND="图片名称"加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，您也可以指定某栏或某列的背景图片：

    原始码呈现结果
    <TABLE BORDER="1" BGCOLOR=#FFCC33>
    <TR><TD>1</TD><TD>2</TD></TR>
    <TR><TD>3</TD><TD>4</TD></TR>
    </TABLE>
    12
    34

    将BACKGROUND="图片名称"加在<TD>中，可以指定“一栏”的背景颜色：

    原始码呈现结果
    <TABLE BORDER="1">
    <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
    <TR><TD>3</TD><TD>4</TD></TR>
    </TABLE>
    12
    34

     



【表格框线设定】

 

  1. 如何设定表格粗细？只要利用BORDER="粗细值"就行了。

    原始码呈现结果
    <TABLE BORDER=5>
    <TR><TD>1</TD></TR>
    </TABLE>
    1

     

  2. 如何设定表格颜色？只要利用BORDERCOLOR="颜色码"就行了。

    原始码呈现结果
    <TABLE BORDER="5" BORDERCOLOR="#0080FF">
    <TR><TD>1</TD></TR>
    </TABLE>
    1

     

  3. 另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感喔！只要利用 BORDERCOLORLIGHT="#颜色码"（亮面设定） BORDERCOLORDARK="颜色码"（暗面设定）就行了。

    原始码呈现结果
    <TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
    <TR><TD>1</TD></TR>
    </TABLE>
    1

     



【表格栏距设定】

 

  1. 我们可以利用CELLPADDING属性自由设定表格内文距离格线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言内定值为2，不过我建议设定为4比较漂亮。

    原始码呈现结果
    <TABLE BORDER="1" CELLPADDING="10">
    <TR><TD>1</TD><TD>2</TD></TR>
    </TABLE>
    12

     

  2. 我们可以利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2，不过我通常习惯设为 0 。

    原始码呈现结果
    <TABLE BORDER="1" CELLSPACING="5">
    <TR><TD>1</TD><TD>2</TD></TR>
    </TABLE>
    12

     

     

 
HTML 语法教学之表格标签
礷天設計
04-25 1606
【网页中的表格观念】 举个例子来说，如果今天我们要做一个3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好几个步骤的，第一个步骤，利用标签告诉电脑我要做一个表格；第二个步骤，利用一组标签先做一个横列，然后在横列中利用三组标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系
lesson8--table标签
yiyi_xichen的专栏
10-10 436
注意事项： 1、不要给table,th,td以外的表格标签加样式； 2、单元格默认平分table 的宽度 3、th里面的内容默认加粗并且左右上下居中显示 4、td里面的内容默认上下居中左右居左显示 5、 table 决定了整个表格的宽度； 6、table里面的单元格宽度会被转换成百分比； 7、 表格里面的每一列必须有宽度； 8、表格同一竖列继承最大宽度； 9、表格同行继承最大高度
HTML学习笔记——表格标签
Barry Jim的博客
08-28 676
表格标签 目录 简介 作用 格式 注意点 简介 在过去表格标签使用的非常多，绝大多数网站都是通过表格标签来制作的，表格标签是一个时代的代表，&amp;amp;lt;table&amp;amp;gt; 标签用来定义 HTML 表格，一个简单的 HTML 表格应该包括两行两列。 作用 表格标签是用来给一堆数据添加表格语义的，其实表格就是数据的一种展现形式，具有一定的规则。当数据量大的时候，表格这种展现形式被认为是...
如何用自定义标签写一个查询数据库的Table?
ForeverFirst的专栏
06-08 569
大家好! 我是新进入的会员,我想问问用自定义标签写一个查询 数据库的Table该如何去写？请大家有着面经验的就指点一二吧，在此现行谢过了。请有知道速回。 
重拾html-4-070121
runner0592的专栏（what's up?)
01-22 950
4.6 影像标签 回细说索引> 【影像标签】 在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您要的图，档名大小写不一致，如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但
重拾html-9-070126
runner0592的专栏（what's up?)
01-26 940
4.11 表单标签 回细说索引> 【表单的用途】 对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CGI、JAVA Script程式或是ASP程式来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！
CSS快速入门-1-20070203
runner0592的专栏（what's up?)
02-03 866
CSS 介绍w3pop.com / 2006-09-19 CSS 语法 What You Should Already Know哪些是你应该已经知道的 Before you continue you should have some basic understanding of the following:在继续前你应该具备下面相关的基础知识： HTML / X
重拾html-1-070121
runner0592的专栏（what's up?)
01-22 860
内容抄自 http://chinese.allproducts.com.tw/GB/html/#t14.1 网页架构 回细说索引>　　　网页制作教学　　　　　　BODY之间则为主要语法所在，也是网页的主要呈现部分。　【标签解说】 以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。
重拾html-3-070121
runner0592的专栏（what's up?)
01-22 835
4.4 字体标签 回细说索引> 【标题标签】     使用方法：标题内容   标签解说：标题的大小一共有六种，两
重拾html-2-070121
runner0592的专栏（what's up?)
01-22 810
4.3 排版标签 回细说索引> 【文字置左、置中、置右】     使用方法：老实说，刚刚我们学过的分段标签再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：
重拾html-10-070126
runner0592的专栏（what's up?)
01-26 803
4.12 框架标签 回细说索引> 【框架的基本概念】     首先，各位先看看右手边这张图，我将利用这张图来作解说，这样子，讲起来可能会清楚一点。 OK！我们可以看见，右边的这个视窗，一共分为 1 、 2 、 3 三
重拾html-6-070121
runner0592的专栏（what's up?)
01-22 770
连结标签 回细说索引> 【WWW连结标签基本概念】     连结基本概念：一般而言，所谓连结就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当游标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网
重拾html-5-070121
runner0592的专栏（what's up?)
01-22 725
4.7 背景标签 回细说索引> 【背景标签】 说穿了，背景标签只有这个标签，其余的效果，只要加上一些简单的属性便可做到。     使用方法：>  
重拾html-8-070126
runner0592的专栏（what's up?)
01-26 706
4.10 序列标签 回细说索引> 【无序标签】     序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例0688,短波无线监听发射器2(100MHz)
最新发布
06-29
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例0688、短波无线监听发射器2（100MHz）
c++经典代码清晰版-下载即用.zip
06-29
已经博主授权,源码转载自 https://pan.quark.cn/s/fb533687a163 《C++经典代码大全》是一部专门针对C++入门者的重要参考资料，其核心目标在于提供易于理解的C++编程范例，旨在协助新学者迅速领会C++语言的关键概念与技术要点。此压缩文件所包含的信息或许涵盖了从基础到高级的各类C++编程技巧，涉及面向对象编程中的类与对象、函数的应用、程序流程控制、数据结构设计、模板技术以及异常管理等多个关键领域。 1. **基础语法** - 变量声明与初始化：掌握如何声明并初始化不同数据类型的变量，例如整型（int）、浮点型（float）、字符型（char）等。 - 基本输入输出：学习运用`std::cin`和`std::cout`执行标准数据输入与输出操作。 - 控制流语句：熟练运用条件语句（if、if-else、switch-case）以及循环语句（for、while、do-while）来控制程序流程。 2. **类与对象** - 类的定义：学会如何构建类，包含其成员变量与成员函数的设定。 - 对象的创建与使用：掌握如何实例化对象，并经由对象访问类的成员函数。 - 封装：理解封装的理念，并学习使用private和public访问修饰符来保护数据。 - 构造函数与析构函数：掌握如何为类定义自定义的构造过程与析构过程。 3. **函数** - 函数的定义与调用：理解函数的功能与作用，以及如何进行函数的定义和调用。 - 函数参数：精通不同类型的参数传递方法，包括值传递和引用传递。 - 函数重载：学习在同一作用域内定义多个具有相同名称但参数列表不同的函数。 - 函数指针：了解函数指针的运用方法，及其在回调函数和模板中的应用场景。 4. **数组与字符串** -...
计及自适应预测修正的微电网 MPC 优化调度方法研究（Matlab代码实现）
06-29
内容概要：本文研究了一种计及自适应预测修正的微电网模型预测控制（MPC）优化调度方法，并提供了Matlab代码实现。该方法针对微电网中风电出力等可再生能源的强不确定性，引入自适应预测修正机制，动态调整预测模型以提升短期功率预测精度，从而增强调度决策的准确性与系统运行的鲁棒性。研究构建了完整的MPC滚动优化框架，涵盖预测模型建立、多时间尺度优化求解、实时反馈校正等关键环节，实现了系统运行成本最小化、能源高效利用与功率平衡的多重目标。所提方法有效应对了负荷波动与新能源出力随机性带来的调度挑战，提升了微电网能量管理系统的智能化水平。; 适合人群：具备电力系统、自动化、控制理论或相关领域基础知识的研究生、科研人员及工程技术人员，尤其适合从事微电网优化、可再生能源集成、模型预测控制研究的专业人士，熟悉Matlab编程与优化算法者更佳。; 使用场景及目标：①应用于高比例可再生能源接入的微电网能量管理系统，提升调度方案的实时性与鲁棒性；②为不确定性环境下电力系统动态优化控制策略的研究提供仿真验证平台；③支持学术论文复现、科研课题攻关及实际工程项目的前期技术验证与方案预研。; 阅读建议：建议结合Matlab代码逐模块分析算法实现细节，重点关注预测模型构建与反馈修正机制的设计逻辑，通过调整风电出力、负荷需求等场景参数进行仿真实验，深入理解MPC在微电网调度中的滚动优化特性与自适应修正能力。
技术转移平台+人工双轮驱动模式如何运作.docx
06-29
科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值