HTML表格(TABLE)标记(TAGS)

表格的基本语法

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)

带边框的表格：

<table border><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Food Drink Sweet
A B C

不带边框的表格：

<table><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>
Food Drink Sweet
A B C 


<--################## Table Span ########################-->


 跨多行、多列的表元(Table Span)


<------Colspan------->


跨多列的表元 <th colspan=#>


<table border><tr><th colspan=3> Morning Menu</th><tr><th>Food</th>       <th>Drink</th>  <th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>





Morning Menu




Food
Drink
Sweet




A
B
C





<------Rowspan------->


跨多行的表元 <th rowspan=#>


<table border><tr><th rowspan=3> Morning Menu</th>        <th>Food</th> <td>A</td></tr><tr><th>Drink</th> <td>B</td></tr><tr><th>Sweet</th> <td>C</td></tr></table>





Morning Menu
Food
A




Drink
B




Sweet
C







<--################## Size ########################-->


 表格尺寸设置


<------Border------->


<table border=#>


边框尺寸设置：


<table border=10><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>





Food
Drink
Sweet




A
B
C





<------Length------->


<table border width=# height=#>


表格尺寸设置：


<table border width=170 height=100><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>





Food
Drink
Sweet




A
B
C





<------CellSpacing------->


<table border cellspacing=#>


表元间隙设置：


<table border cellspacing=10><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>





Food
Drink
Sweet




A
B
C





<------CellPadding------->


<table border cellpadding=#>


表元内部空白设置：


<table border cellpadding=10><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>





Food
Drink
Sweet




A
B
C







<--################## Text in Table ########################-->


 表格内文字的对齐/布局


<------ALIGN------->


<tr align=#>


<th align=#> #=left, center, right


<td align=#>


<table border width=160><tr>                <th>Food</th><th>Drink</th><th>Sweet</th><tr>                <td align=left>A</td>                <td align=center>B</td>                <td align=right>C</td>  </table>





Food
Drink
Sweet




A
B
C





<------VALIGN------->


<tr valign=#>


<th valign=#> #=top, middle, bottom, baseline


<td valign=#>


<table border height=100><tr>                <th>Food</th><th>Drink</th>                <th>Sweet</th><th>Other</th><tr>                <td valign=top>A</td>                <td valign=middle>B</td>                <td valign=bottom>C</td>                <td valign=baseline>D</td></table>





Food
Drink
Sweet
Other




A
B
C
D







<--################## Floating Table ########################-->


 表格在页面中的对齐/布局(Floating Table)


<------left------->


<table align=left>


<table align="left" border><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>My favorites...<br>cookies, chocolates, and more.





Food
Drink
Sweet




A
B
C





My favorites...
cookies, chocolates, and more.




<------right------->


<table align=right>





Food
Drink
Sweet




A
B
C





My favorites...
cookies, chocolates, and more.




<table vspace=# hspace=#> #=space value 


<table align="left" border vspace=20 hspace=30><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>My favorites...<br>cookies, chocolates, and more.





Food
Drink
Sweet




A
B
C





My favorites...
cookies, chocolates, and more.




<--################## Table Caption ########################-->


 表格的标题 


<------Caption align------->


<caption align=#> ... </caption> #=left, center, right


<table border><caption align=center>Lunch</caption><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>


Lunch


FoodDrinkSweetABC
<------Caption Valign------->


<caption valign=#> ... </caption> #=top, bottom


    

  • valign=top is default.
    • 



<table border><caption valign=bottom>Lunch</caption><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>      </table>


Lunch


FoodDrinkSweetABC


以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索表格

                    ，                多行

                    ，                cookies

                                    sweet

                                    html表格标记、html tags、kindeditor htmltags、html5 tags、org.htmlparser.tags，以便于您获取更多的相关知识。
				


				
时间： 2024-12-09 03:12:39

		
		


		


	

	
	

		


		
HTML表格(TABLE)标记(TAGS)的相关文章


								

		

			

                html-HTML中 表格table 外面的线是怎么实现的，而且外线框上还有表格标题
			

		

		

									

				问题描述 HTML中 表格table 外面的线是怎么实现的,而且外线框上还有表格标题 解决方案 这里面是标题 这里面是FIELDSET标签内的内容. 这里面是FIELDSET标签内的内容. 解决方案二: fildset里面套个table就可以了. 解决方案三: http://www.educity.cn/wenda/8408.htmlhttp://fun.sobar.com.tw/list.asp?id=148776 fieldset 解决方案四: 里面就是table好了 解决方案五: http			

		

	

				

		

			

                使用DIV+CSS制作网页后，表格Table还有用吗？
			

		

		

									

				css|网页 符合网页标准的网页是DIV+CSS制作的,那么我们以前使用的表格Table还有用吗?是不是要彻底放弃呢? 关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很			

		

	

				

		

			

                如何像表格table一样对层div进行轻松布局
			

		

		

									

				下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧. 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示.但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题.其实有个简单的方法,使用di			

		

	

				

		

			

                html表格table的宽度超出页面宽度时如何不改变table宽度（只显示出滚动条）？
			

		

		

									

				问题描述 html表格table的宽度超出页面宽度时如何不改变table宽度(只显示出滚动条)? 问题如题.条件是不能将table的宽度设置为固定值,因为table包含的列数可能每次查询都不同,可能只有一二列,也可能有几十列,要求每一列宽度能够显示其表格的内容(即列的宽度按内容长度显示),如果table宽度没有超出页面宽度就不显示滚动条,也不拉伸表列宽度:如果table宽度超出页面宽度,就显示滚动条,而不压缩表列宽度. 解决方案 http://blog.sina.com.cn/s/blog_66			

		

	

				

		

			

                jQuery 选择表格(table)里的行和列[转]
			

		

		

									

				from : http://www.84ren.com/read.php?tid-29040.html jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序.样式改变等等.如果你的英文够好,你可以读读这篇文章:jQuery table manipulation.本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助. 比如我们有这样一个表格: 第一列 第二			

		

	

				

		

			

                在按下按钮后，将view.aspx文件引入到index.aspx中的表格TABLE中来？
			

		

		

									

				问题描述 在按下按钮后,将view.aspx文件引入到index.aspx中的表格TABLE中来?原来的index.aspx文件内容不发生改变.index.aspx.cs文件:protectedvoidButton1_Click(objectsender,EventArgse){} 解决方案 解决方案二:这样行不?<%@includefile="a.jsp"%>解决方案三:这样行不?<%@includefile="a.aspx"%>解决方案四			

		

	

				

		

			

                使用DIV+CSS后，表格Table还有用吗？
			

		

		

									

				   符合网页标准的网页是DIV+Css制作的,那么我们以前使用的表格Table还有用吗?是不是要彻底放弃呢? 关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很多年的,			

		

	

				

		

			

                jQuery 选择表格(table)里的行和列及改变简单样式_jquery
			

		

		

									

				jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序.样式改变等等.如果你的英文够好,你可以读读这篇文章:jQuery table manipulation.本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助. 比如我们有这样一个表格: 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三			

		

	

				

		

			

                jQuery+json实现动态创建复杂表格table的方法_jquery
			

		

		

									

				本文实例讲述了jQuery+json实现动态创建复杂表格table的方法.分享给大家供大家参考,具体如下: function SetSubTable() { var obj = jQuery.parseJSON($("#SubJsonStrValue").val()); window.ALLPARAMTERS = obj; var row_str = ""; var span_num = 1 for (var i = 0; i < obj.length; i+