HTML学习中的一点疑问,高手请进,谢谢

HTML学习中的一点疑问,高手请进,谢谢,第1张

<TD></TD>是表格中的一个单元格

<TH></TH>是表格中的表头,即TableHead的缩写,与<TD>标记相比,它通常具有其他特定格式,如单元格中的内容加粗、居中显示。

----------------------------------------------

更多可参考:

HTML表格制作

一、创建表格

在HTML中可使用<TABLE>、<CAPTION>、<TR>、<TH>、<TD>等标记符来创建和设计表格。

1)<TABLE>标记符

双标记符<TABLE>和</TABLE>用于定义表格,一个表格的所有内容都放在这2个标记符之间。它具有多个属性,具体内容在后面述叙。

2)创建表格标题

双标记符<CAPTION>和</CAPTION>用于建立表格的标题,并使用ALIGN属性定义标题的位置。ALIGN位置属性有4个值,即top(标题放在表格的上方)、bottom(标题放在表格的下方)、left(标题放在表格的左上方)、right(标题放在表格的右上方)。一个表格只能有一个标题。

例如:

<CAPTION align=bottom>颜色与颜色值对应表</CAPTION>,表示将表格标题放在表格的下面且居中。

3)建立表头

表头是表格中行或列的标题,即表项的名称。使用<TH>可以在表的第一行或第一列加表头,表头内容写在<TH>和</TH>之间,显示时将采用粗体字以醒目。

在表格的第一行加表头的格式为:

<TH>表头1</TH><TH>表头2</TH><TH>表头3</TH>

在表格的第一列加表头的格式为:

<TH>表头1</TH><TD>表项1</TD><TD>表项2</TD><TD>表项3</TD>

4)表格行与列的定义

表格的内容是由行定义标记符<TR>和</TR>以及列定义标记符<TD>与</TD>来确定的。</TR>可以省略,即一个新的<TR>开始,表示前一个<TR>的结束。一般的</TD>也可以省略。

在<TR>、<TD>、<TH>标记符中可使用ROWSPAN和COLSPAN属性对行、列合并。

例如:<TD ROWSPAN=3>表项1</TD>表示在纵向上合并3行;而标记符<TD COLSPAN=3>表项2</TD>表示在水平方向上合并的列数。利用这一功能可制作出较为复杂的多层表头的表格。下面的HTML代码产生一个具有多层表头的表格。

<BODY>

<TABLE BORDER=2 WIDTH="95%">

<CAPTION>跨行跨列的表格例</CAPTION>

<TR><TH ROWSPAN=2>

<TH COLSPAN=2 BORDERCOLOR=red>平均<TH ROWSPAN=2>其他<BR>

类号<TH COLSPAN=2>性能

<TR><TH>数据1<TH>数据2<TH>MAX<TH>MIN

<TR ALIGN=left><TH>甲种(高级)<TD>19<TD>003<TD>034<TD>33<TD>03

<TR ALIGN=right><TH ROWSPAN=2>乙种<TD>17<TD>8<TD>66<TD>89<TD>88

</TABLE>

</BODY>

总之,构造表格时,每个<TR>标记符产生一行,表格有多少行就应有多少个<TR>标记符;表格的列数则由<TH>或<TD>的个数而定;若表的单元格中无任何内容,则使用无内容的<TH> </TH>或<TD> </TD>标记符即可。

二、表格的修饰

1)表格边框和分隔线

在<TABLE>标记符内使用FRAME、RULES、BORDER属性可以设置表格的边框和单元格分隔线。

FRAME属性用于控制是否显示边框以及如何显示边框,其值可以是void(默认值无边框)、above(只有顶框)、below(只有底框)、hsides(只有顶框和底框)、vsides(只有左右侧框)、lhs(只有左侧框)、rhs(只有右侧框)、box(包含4个边框)。

ROLES属性用于控制单元格之间的分隔线,其值可以是:none(无分隔线)、groups(只在行组和列组间有分隔线)、rows(仅有行分隔线)、cols(仅有列分隔线)、all(具有所有分隔线)。none为默认值。

BORDER属性用于设置边框线的宽度。若BORDER="0",则表示无边框,无分隔线;若取其他值,则意味着包含所有边框和分隔线。若使用<TABLE BORDER>,相当于为BORDER设置了非零值。

2)表格的对齐

表格的对齐指表格在页面中的对齐方式。

表格在页面中的对齐可在<TABLE>标记符中使用ALIGN属性,其取值可有left、centen和right。默认值为left、即为页面中左对齐。当表格与文字混合编排时,则文件中安排在表格后面的文字会显示在表格的右边或左边,形成文字与表格环绕的效果。

3)单元格中内容的对齐

单元格内容的对齐包括数据项在水平方向上的对齐和在垂直方向上的对齐。设置数据水平方向对齐是在表格内容标记符<TH>、<TD>、<TR>中使用ALIGN属性。其取值可以是center、left、right、justify(两端对齐)、char(按特定字体对齐)。默认为左对齐。

垂直对齐则是使用VALIGN属性,其取值为top(单元格顶部)、bottom(单元格底部)、middle(垂直方向的中部)、baseline(同行单元格一致)。默认值为居中(middle)对齐。

4)单元格之间的间隔

在<TABLE>标记符中可使用CELLSPACING属性来调节单元格之间的间隔;使用CELLPADDING属性来调节表格分隔线和数据(即数据与单元格边线)之间的间隔。它们的属性项取值为象素值。

三、使用表格设计页面布局

HTML中有多种安排页面内容、设计页面布局的方法,运用表格就是方法之一。如果将整个窗口或整个显示的页面定义为一个表格,但隐去表格线,则在每个单元格中可以安排不同的内容(文本或图像)、甚至设置不同的背景,这样便可获得特殊的页面布局。

1)用色块进行页面布局

在标记符<TABLE>、<TR>、<TD>内使用BGCOLOR属性可设置单元格的背景色;使用BACKGROUND属性可设置背景图案。例如:<TABL BGCOLOR="gray">可使表格背景为灰色,而<TD BGCOLOR="yellow">则可使某单元格为**。通过大的色块分割,可使整个页面窗口分为几个明显的部分,以使信息归类组织,即醒目又有序。

2)用表格嵌套实现页面布局

将表格作为一个单元格的内容,安排在<TD>和</TD>标记符之间,即可实现表格的嵌套的页面布局。以下代码使用了表格嵌套的方法和不同色块方法构造页面布局。

<HTML>

<HEAD></HEAD>

<BODY>

<TABLE border="0" cellspacing="0" cellpadding="0" align = "center">

<TR> <TD width="160" height="200" bgcolor="d9b719" align="center"> 第一框(单元格)内的数据

<TD><!-- 第二框(单元格)内是一个嵌套表格--> <TABLE border = "1" width = "250" bgcolor = "f0fdf9">

<TR height = "100"> <TD align = "center" >第一部分数据

<TR height = "100"> <TD align = "center" >第二部分数据

</TABLE>

</TD>

<TD width="160" height="200" bgcolor="d9b719" align="center"> 第三框(单元格)内的数据

<TR><TD colspan = "3" bgcolor = "538e63" height="100"align = "center"> 第四框(单元格)内的数据

</TABLE>

</BODY>

</HTML>

参考:百度

可能很多除使用Dreamweaver的网友对其中的表格属性的设置还不是很了解,想要让html 表格边框有细线的效果,首先我们得要让边框像素为最小,其次它的内边距等都得为零,一起看看具体的设置方法吧。

Dreamweaver html 表格边框细线效果怎么实现

方法一:

1、按图所示,最重要的一点,我没有点实际视图,是方面给大家演示出来的效果。

2、然后可以根据大家的需求来选择。我们直接来看效果吧!

方法二:

1、首先打开Dreamweaver CS6创建一个表格

2、边框粗细为1像素,单元格边距和间距为零。(默认状态即可)

方法三:

1、我们点实时视图看预览的表格边框比较粗,实际上在浏览器观看也是一样的,我就不贴图了。

2、在table标签里面添加一个style内嵌样式,复制下面的代码。

复制内容到剪贴板

style="

border-collapse:collapse;

border-width:thin;

border-style:solid;"

3、然后让我们开下点下里的实际视图。一目了然。按道理说应该完善了。但是如果有需要的话,加点颜色会更好。

总结:以上就是全部的Dreamweaver html 表格边框细线效果怎么实现相关内容了,不知道大家是否已经了解了呢。

html中的主要标签有哪些,具体作用是什么?

文件标记

文件声明让浏览器知道这是HTML文件

开头提供文件整体资讯

标题定义文件标题,将显示于浏览顶端

本文设计文件格式及内文所在

排版标记

○说明标记为文件加上说明,但不被显示

○段落标记为字、画、表格等之间留一空白行

○换行标记令字、画、表格等显示于下一行

○水平线插入一条水平线居中令字、画、表格等显示于中间反对预设格式令文件按照原始码的排列方式显示区隔标记设定字、画、表格等的摆放位置

不折行令文字不因太长而绕行

建议折行预设折行部位

字体标记

加重语气产生字体加粗Bold的效果

粗体标记产生字体加粗的效果

强调标记字体出现斜体效果

斜体标记字体出现斜体效果

打字字体Courier字体,字母宽度相同

加上底线加上底线反对

一级标题标记变粗变大加宽,程度与级数反比二级标题标记将字体变粗变大加宽三级标题标记将字体变粗变大加宽四级标题标记将字体变粗变大加宽五级标题标记将字体变粗变大加宽六级标题标记将字体变粗变大加宽

字形标记设定字形、大小、颜色反对

○基准字形标记设定所有字形、大小、颜色反对

字体加大令字体稍为加大

字体缩细令字体稍为缩细

画线删除为字体加一删除线反对

程式码字体稍为加宽如

键盘字字体稍为加宽,单一空白

范例字体稍为加宽如

变数斜体效果

传记引述斜体效果

引述文字区块缩排字体

述语定义斜体效果

地址标记斜体效果

下标字下标字

上标字指数(平方、立方等)

清单标记

顺序清单清单项目将以数字、字母顺序排列无序清单清单项目将以圆点排列○清单项目每一标记标示一项清单项目选单清单清单项目将以圆点排列,如反对目录清单清单项目将以圆点排列,如反对定义清单清单分两层出现○定义条目标示该项定义的标题○定义内容标示定义内容

表格标记

表格标记设定该表格的各项参数

表格标题做成一打通列以填入表格标题

表格列设定该表格的列

表格栏设定该表格的栏

表格标头相等于,但其内之字体会变粗

表单标记

表单标记决定单一表单的运作模式

文字区块提供文字方盒以输入较大量文字

○输入标记决定输入形式

选择标记建立pop-up卷动清单

○选项每一标记标示一个选项

图形标记

○图形标记用以插入图形及设定图形属性

连结标记

连结标记加入连结

○基准标记可将相对URL转绝对及指定连结目标

框架标记

框架设定设定框架

○框窗设定设定框窗

○页内框架于网页中间插入框架IE

不支援框架设定当浏览器不支援框架时的提示

影像地图

影像地图名称设定影像地图名称

○连结区域设定各连结区域

多媒体

○背景声音于背景播放声音或音乐IE

○多媒体加入声音、音乐或影像

其他标记

走动文字令文字左右走动IE

闪烁文字闪烁文字NC

○页内寻找器可输入关键字寻找于该一页反对

○开头定义让浏览器知道这是HTML文件

○关系定义定义该文件与其他URL的关系

StyleSheet

是都可以布局,但frameset的好处是:<Frameset>…</Frameset>标签可以设计显示为多个分栏的效果,每个分栏被称为一个框架,每个框架中可显示一个HTML文档。使用框架的HTML文档的结构与其他HTML文档不同,它不使用<BODY>标签,而使用<Frameset>标签。其基本结构如下:

<Frameset Cols=”宽度1,宽度2,…”> ;将浏览器分割成若干格框架

<Frame Src = HTML 文档1> ;定义在第一个框架中显示的文档

<Frame Src = HTML 文档2> ;定义在第二个框架中显示的文档

……

</Frameset>

若将<Frameset>的属性Cols改为Rows,则可以将浏览器窗口垂直分割成若干个框架。

你在写CSS样式时,{padding:0;margin:0;}。如果不这样,最后调试起来容易出现错误,在没看到你整体代码前,也看不出来问题,因为有很多原因都可以造成这种情况,现在用表格来布局也比较少了,建议用DIV+CSS

对于绘制表格,你可以使用dreamweaver工具,直接插入表,再看下代码是怎么写的。下次可以直接写代码,很简单的。

html 是css 不能代替的,css只是用来控制html的样式而已,也就是为了使页面好看而已。

可以先从视频教程看起,边看边做,注意记下视频教程里面的知识点,以便再查看。最好去图书馆接一本书,html的书就不要买了。浪费。如果认真点,一个星期,差不多就掌握的差不多了,顺便也把css+div掌握差不多了。

一般来说,态度端正点,html+css+div一个星期就可以学会。差点的俩星期。

代码都这样,都写几遍就会了,记事记不住的,多写几遍,想记不住都难。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/12177812.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-21
下一篇2023-05-21

发表评论

登录后才能评论

评论列表(0条)

    保存