07网页表格标记及属性

最新推荐文章于 2022-06-25 11:56:09 发布
最新推荐文章于 2022-06-25 11:56:09 发布
阅读量302 收藏
点赞数
原文链接：http://www.cnblogs.com/Aha-Best/p/10858383.html
版权

网页表格标记及属性

 

<HTML>
	<BODY>
		<TABLE WIDTH="300" BORDER="1">
			<TR>
				<TD COLSPAN="3" ALIGN="CENTER">学生登记表
</TD>
			</TR>
			<TR>
				<TH>姓名</TH><TH>年龄</TH><TH>性别</TH>
			</TR>
			<TR>
				<TD>张三</TD><TD>23</TD><TD>男</TD>
			</TR>
			<TR>
				<TD>玛丽</TD><TD>20</TD><TD>女</TD>
			</TR>
		</TABLE>
	</BODY>
</HTML>

<table></table>标记用于定义一个表格，一些常用的属性： 

WIDTH：WIDTH属性用于定义表格的宽度，可以用一个整数来表示像素或者用一个百分比来表示占浏览器显示框架的大小，如果没有定义这个属性，那么表格的宽度将根据表格中实际内容所占的大小来决定； 

HEIGHT：HEIGHT属性用于定义表格的高度，同样也可以使用一个整数来表示像素或者用一个百分比来表示占浏览器显示框架的高度。这个属性通常不用，而是根据表格中的内容使用默认的高度； 

BORDER：BORDER属性用于定义表格的边框的宽度，默认为0，也就是没有边框； 

BGCOLOR：定义表格的背景色。

<TR> 

用于定义表格的一行。 

<TH> 

用于定义表头（Table Head）中的列，在浏览器中，通常是表现为粗体居中文字。

<TD>

用于定义表格的一列，所有的表格内容都放在<TD></TD>之间，可以是文字、图片、表单（FORM）元素甚至是另一个表格。可以在<TD>中用WIDTH设置各列的宽度，用ALIGN属性来设置表格格子中内容的水平对齐方式，可以使用LEFT、CENTER、RIGHT中的一个值。另外，对于不规则的表格，可以使用ROWSPAN来设置表格的格子跨越的表格行数，而用COLSPAN来设置表格的格子所跨越的表格列数。在进行表格定义时，<TR>标记必须放在<TABLE>标记之间，而<TD>（<TH>）标记必须放在<TR>标记之间。

<table></table>成对标记定义表格；

<caption></caption>成对标记定义表格标题；

<th></th>成对标记定义表格表头；

<tr></tr>成对标记定义行；

<td></td>成对标记定义列；

<thead></thead>表示定义一组表头行；

<tbody></tbody>表示定义表格主体部分；

<tfoot></tfoot>表示为表格添加一个标注。

表格的宽度和高度  在HTML文件中，<table>标记中的width用于设置表格的宽度，height属性用于设置表格的高度。

表格的边框属性    border 边框粗细 bordercolor 边框颜色 bordercolorlight 亮边框颜色 bordercolordark 暗边框颜色

边框的样式 frame above   显示上边框border 显示上下左右边框below   显示下边框hsides 显示上下边框lhs   显示左边框rhs 显示右边框void   不显示边框vsiders    显示左右边框

边框的样式 rules all  显示所有内部边框groups  显示介于行列边框

none   不显示内部边框cols   仅显示列边框rows 仅显示行边框

设置表格背景颜色  在HTML文件中，通过设置bgcolor的属性值就可以设置表格的颜色。bgcolor的属性值可以是十六进制数或者英文。

设置表格行与单元格

调整行内容水平对齐——align 在HTML文件中，设置行内容水平对齐方式常用的有：Left设置内容左对齐,Right设置内容右对齐 ,Center设置内容居中对齐。

调整行内容垂直对齐——valign 在HTML文件中，常用的4种对齐方式有:top内容顶端对齐,middle内容居中对齐,bottom内容底端对齐,baseline内容基线对齐。

设置跨行——rowspan  在HTML文件中，设置单元格的跨行，只要设置标记中的rowspan的属性值即可实现。

设置跨列——colspan  在HTML文件中，设置单元格的跨列，只要设置标记中的colspan的属性值即可实现。

设置单元格间距——cellspacing   在HTML文件中，设置<table>标记中的cellspacing属性值就可以设置表格中单元格的间距。

设置单元格边距——cellpadding 在HTML中，设置<table>标记中的cellspacing属性值就可以设置单元格中内容与边框之间的间距。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<base href="http://www.baidu.com" target="_blank">

<meta name="Keywords" content="超文本,标记，语言">

<meta http-equiv="Refresh" content="1">

<meta http-equiv="Expires" content="60">

<title>超文本标记语言</title>

</head>

<body topmargin="10px" leftmargin="10px" rightmargin="10px" bottommargin="10px;">

    <a href="" target="_blank">基底网址</a>

    <img src="" width="" height="" alt="图片">

    <bgsound src="" loop="-1" >音乐</bgsound>

    <embed src="" height="" width="">

    <font face="楷体" color="red" size="+6">字体设计</font>

    <b>简单修饰文字</b><i>简单修饰文字</i><u>简单修饰文字</u>

    <address>地址文字</address>

    <tt>打字机风格</tt><code>等宽文字</code><samp>文字设置</samp><kdb>键盘风格</kdb>

    H<sub>2</sub>O<sup>1</sup>

    <ruby>军队<rt>红军</rt></ruby>

    <strike>删除线</strike>

    <br>

    <marquee bgcolor="re#000000" height="60px" loop="-1" direction="left">滚动文字</marquee>

    <br>

    <ol>

       <li>aa</li>

       <li>bb</li>

    </ol>

    <hr color="green">

    <ul>

        <li>aa</li>

       <li>bb</li>

    </ul>

    <hr color="yellow">

    <dl>

       <dt>图书

       <dd>文学</dd>

       <dd>史学</dd>

       </dt>

    </dl>

    <hr color="red">

    <form>

       <input type="text">

       <input type="password">

       <input type="file">

       <input type="checkbox"><input type="checkbox">

       <input type="radio">

       <input type="button">

       <input type="submit">

       <input type="reset">

       <input type="image">

       <select>

           <option>选项一</option>

           <option>选项二</option>

       </select>

    </form>

    <hr>

    <table  border="20px">

    <tr>

       <td>11</td>

       <td>11</td>  

       <td>11</td>  

    </tr>

    <tr>

       <td>22</td>

       <td>22</td>  

       <td>22</td>  

    </tr>

    <tr>

       <td>33</td>

       <td>33</td>  

       <td>33</td>  

    </tr>

    </table>

</body>

</html>

 

 

转载于:https://www.cnblogs.com/Aha-Best/p/10858383.html

weixin_30326741
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《web开发： HTML 表格标签》
yexiangCSDN的专栏
01-14 288
一、HTML 标签大全二 1. 表格标签 表格是实际开发中非常常用的标签: 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据 的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 Pink老师总结: 表格不是用来布局页面的,而是用来展示数据的. 1.2 表格的基本语法 <table> <tr> <td>单元格内的文字&l...
HTML表格标记
yanleigis的专栏
10-31 977
■ 表格标记 　　欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。 　　也请先明白围堵标记与空标记的分别，请看 【HTML概念】。■ ：▲Top　　这三个标记是定义表格的最重要的标记，可以说只学这三个已足够。 　　是一个容器标记，意思是说它用以宣告这是表格而其它标记只能在它的范围内 才适用，属容器标记的还有其他。 　　用以标示表格
HTML的表格标记
sinat_58088248的博客
02-26 5784
一.表格标记 功能：建立基本表格。 格式：<table bgcolor ='color1' background='image-url' border='n' bordercolor='color2' width='x' height='y' align='left/right/center' cellspacing='i' cellpadding='j'> <caption>表格标题</caption> <tr> <th>表头1..
表单标签及其属性
weixin_49542222的博客
08-04 533
表单form，主要用于用户于web服务器进行交互。 <form action="" method="get" name=""> </form> action: URL 用来处理表单信息的服务器地址 method: 浏览器用来提交表单的http方式，常用的get/post get ： 通过这种方式提交的表单数据会被附加在链接上，通过"?"分割 发送敏感内容不建议使用这种方式 post： 表单数据会存放在请求体，传递给服务器， ...
html表格及其属性
唐三十胖子的博客
06-03 1697
表格属性：align  cellspacing  cellpadding  width  height  border  (frame控制表格边框最外面四条线框 role控制单元格之间的分割线） 表格的显示位置：”center”> 单元格之间的间距：”2px”> 单元格内与边框距离：”2px”> 标题属性： align表示放在表格的位置 例如:caption align=”top
程序员学习前端基础教程网页设计用好HTML表格标记及属性
01-08
　常用表格标记 … 表格指令 。 相关属性 :  · ALIGN 调整  · BGCOLOR 背景颜色  · BORDER 边框  · HEIGHT 高度  · WIDTH 宽度 … 表格标题 。 相关属性 :  · ALIGN 调整 … 表格列 ( 可省略 ) 。 相关...
浅谈Html网页表格结构化标记的应用
09-28
HTML网页表格结构化标记是网页设计中用于呈现数据的重要元素，它通过特定的标签和结构来组织信息，提高数据的可读性和可访问性。在本文中，我们将深入探讨HTML表格的结构化标记，包括表格的组成部分、标题的设置以及...
HTML表格标记教程(40):表头的暗边框色属性BORDERCOLORDARK
01-19
在表头中，可以单独定义暗边框色。 基本语法 语法解释 定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。 ...设定表头暗边框的颜色。01 <...– ————————...10 主流的网页设计软件</H1>11 <TABLE
HTML表格标记教程(7):背景颜色属性BGCOLOR
01-19
通过BGCOLOR属性，可以设定表格的背景颜色。 基本语法 语法解释 定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。 文件范例：10-7.htm 设定表格背景的颜色。01 <!– —————————— –>02 &lt...
HTML表格标记教程(2):表格的边框属性BORDER
12-09
默认情况下，表格的边框为0，我们可以为表格设置边框线。 基本语法 语法解释 通过BORDER属性定义边框线的宽度，单位为像素。 文件范例：10-2.htm 设定边框线的宽度。01 <!– —————————— –>02 <!–...
html表格结构划分标记,Html网页表格结构化标记该如何使用
weixin_39606003的博客
06-20 179
这次给大家带来Html网页表格结构化标记该如何使用，Html网页表格结构化标记使用的注意事项有哪些，下面就是实战案例，一起来看一下。所谓的结构化，就是把我们的表格划分为三种：表头、表体、表尾。从而当我们在修改表体部分的时候，不会影响到其它两部分，从而解除了耦合，方便我们的应用。结构化格式… --------表头区…---------表体区…------------表尾区总结：通过把表格划分为三部分...
简单表单设计标记属性及例子
Dashen__Daiwo的博客
06-03 1189
6月3日笔记 表单的设计 1.表单的标记 （1）<form</form定义表单的开始位置和结束位置 （2）基本格式：<form action=”服务器端地址（接受表单内容的地址）” name=”表单名称” method=”post/get” …</form 2.常用属性： （1）method属性： 1.get方式：get方式提交时，会将表单的内容附加在URL地址的后面，所以限制了提交内容的长度，不超过8192个字符，且不具备保密性。 2.post方式：post方式提交时，将表单中的数
HTML表格属性、表单属性
Chico_D的博客
06-02 612
一、表格的标签及属性 1.表格table属性 属性 功能解释 Width、height 设置宽高，单位是像素（px）或百分比 align 定义表格对齐方式 border 设置外边框厚度 bgcolor 设置表格背景颜色 background 设置背景图片 Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0 Cellpadding 单元格边距（表格边框与内容的距离） 一般情况写0 2.表格table的行（tr）属性 属性 功能解释
表格的标签及属性
Lemon_Staring的博客
09-06 1897
一、 表格的标签及属性 table属性 Width、height 宽高（单位是像素或百分比） align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0 Cellpadding ...
HTML笔记：表格属性介绍
三桥君
12-07 715
表格标签 caption：表格标题 table：表格内容 tr：若干行 th：表头的表列 td：表体的表列 语义化标签： thead：表头内容 tbody：表体内容 tfood：表尾内容 注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。 如何使表格框线没有间距，变为实心线？ 在table标签中加 border=“1” <table border="1" cellpadding="10" cellspacing="20"> 如何定义表格尺寸？ 在tab
HTML表格相关属性
vivi_and_qiao的博客
04-13 292
每个HTML标签中不区分大小写，设置各个属性的双引号也可以省略 &lt; head&gt;是一个包含文件标题，编码方式以及URL等信息，这些信息大部分用于提供索引，辨认或者其他方面的应用 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;
表单标签及属性
zheng_qingyuan的博客
06-25 1328
用于数据的采集： 文本框输入标记（单）：密码框输入标记（单）：单选框输入标记（单）：在同一个选项组内，每个选项中的name值必须相同复选框输入标记（单）：
HTML入门知识之表格标志
ysds20211402的博客
05-04 1061
转自：微点阅读https://www.weidianyuedu.com 表格标志 1.<table></table> 2.<tr></tr><td></td> 3.<th></th> 表格标志对于制作网页是很重要的，我希望您能记住这一点，现在很多很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置。但愿您也能熟练使用表格来制作您的主页。 ..
前端:HTML/05/<meta>标记,XHTML简介及其编写规范,表格标签(<table>)及其相关标签(<tr>,<td>或<th>)
Java_53的博客
04-16 369
<meta>标记 <meta>的主要作用，是提供网页的元信息，如：指定网页的搜索关键字 两个属性：http-equlv和name; 1,http-equiv属性：模拟http协议文件头信息，告诉浏览器如何正确显示网页内容； http-equiv属性一般都与content属性配合使用，Content属性指定信息的详细参数； 设置网页的字符集 <meta http-equ...
web-静态网页设计.ppt
最新发布
12-23
学习了基本的表格标记之后，还需要进一步熟悉表格的常用属性，如边框、背景颜色、宽度、对齐方式等，这些属性可以通过HTML中的属性设置来实现。掌握这些属性可以让我们更好地控制表格的显示效果，使网页排版更具吸引...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值