【JavaWeb基础 · HTML表格标签】

186 阅读4分钟

“这是我参与8月更文挑战的第8天,活动详情查看: 8月更文挑战

想想我们平时自己画表格怎么来画,是不是先画一个框,然后画每一行,最后来画单元格。 那HTML的表格是怎么画的呢,同样也是这样画的,下面我们就来一步步学习,怎么用HTML来画一个表格。

<table>标签

<table></table>标签用来定义表格,也就是外面的大框框。

  属性         	值                                       	描述                                      
  align      	left center right                       	HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。
  bgcolor    	rgb(x,x,x) #xxxxxx colorname            	HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。     
  border     	1 ""                                    	规定表格单元是否拥有边框。                           
  cellpadding	pixels                                  	HTML5 不支持。规定单元边沿与其内容之间的空白。              
  cellspacing	pixels                                  	HTML5 不支持。规定单元格之间的空白。                   
  frame      	void above below hsides lhs rhs vsides box border	HTML5 不支持。规定外侧边框的哪个部分是可见的。              
  rules      	none groups rows cols all               	HTML5 不支持。规定内侧边框的哪个部分是可见的。              
  summary    	text                                    	HTML5 不支持。规定表格的摘要。                      
  width      	pixels %                                	HTML5 不支持。规定表格的宽度。                      

<tr>标签

<tr> 标签定义HTML表格中的一行单元格,它应该是成对出现的。

  属性     	值                             	描述                                 
  align  	right left center justify char	HTML5 不支持。定义表格行的内容对齐方式。            
  bgcolor	rgb(x,x,x) #xxxxxx colorname  	HTML5 不支持。HTML 4.01 已废弃。规定表格行的背景颜色。
  char   	character                     	HTML5 不支持。规定根据哪个字符来进行文本对齐。         
  charoff	number                        	HTML5 不支持。规定第一个对齐字符的偏移量。           
  valign 	top middle bottom baseline    	HTML5 不支持。规定表格行中内容的垂直对齐方式。         

<td>标签

<td> 标签定义 HTML 表格中的标准单元格。

  属性     	值                             	描述                                     
  align  	left right center justify char	HTML5 不支持。规定单元格内容的水平对齐方式。              
  bgcolor	rgb(x,x,x) #xxxxxx colorname  	HTML5 不支持。HTML 4.01 已废弃。 规定单元格的背景颜色。   
  char   	character                     	HTML5 不支持。规定根据哪个字符来进行内容的对齐。            
  charoff	number                        	HTML5 不支持。规定对齐字符的偏移量。                  
  colspan	number                        	规定单元格可横跨的列数。                           
  headers	header_id                     	规定与单元格相关联的一个或多个表头单元格。                  
  height 	pixels %                      	HTML5 不支持。HTML 4.01 已废弃。 设置单元格的高度。     
  nowrap 	nowrap                        	HTML5 不支持。HTML 4.01 已废弃。 规定单元格中的内容是否折行。
  rowspan	number                        	设置单元格可横跨的行数。                           
  scope  	col colgroup row rowgroup     	HTML5 不支持。定义将表头单元格与数据单元格相关联的方法。        
  valign 	top middle bottom baseline    	HTML5 不支持。规定单元格内容的垂直排列方式。              
  width  	pixels %                      	HTML5 不支持。HTML 4.01 已废弃。 规定单元格的宽度。     

如果你需要将内容横跨多个行或列,那就使用 colspan 和 rowspan 属性。

<th>标签

<th> 标签表示HTML表格的表头部分,该标签中的内容会以粗体显示。 <th>``<td>标签都是单元格标签,

  • <th> 表头单元格 - 包含头部信息,元素中的文本通常呈现为粗体并且居中。
  • <td> 标准单元格 - 包含数据,元素中的文本通常是普通的左对齐文本。
  属性     	值                             	描述                                      
  align  	left right center justify char	HTML5 不支持。 规定表头单元格内容的水平对齐方式。            
  bgcolor	rgb(x,x,x) #xxxxxx colorname  	HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的背景颜色。  
  char   	character                     	HTML5 不支持。 规定根据哪个字符来进行内容的对齐。            
  charoff	number                        	HTML5 不支持。 规定对齐字符的偏移量。                  
  colspan	number                        	规定表头单元格可横跨的列数。                          
  headers	header_id                     	规定与表头单元格相关联的一个或多个表头单元格。                 
  height 	pixels %                      	HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的高度。    
  nowrap 	nowrap                        	HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格中的内容是否折行。
  rowspan	number                        	规定表头单元格可横跨的行数。                          
  scope  	col colgroup row rowgroup     	规定表头单元格是否是行、列、行组或列组的头部。                 
  valign 	top middle bottom baseline    	HTML5 不支持。 规定表头单元格内容的垂直排列方式。            
  width  	pixels %                      	HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的宽度。    

来看一下一个简单的实例:

<table border="1">
			<th colspan="4">学生成绩表</th>
			<tr>
				<td>学号</td>
				<td>数学成绩</td>
				<td>语文成绩</td>
				<td>英语成绩</td>
			</tr>
			<tr>
				<td>1</td>
				<td>95</td>
				<td>88</td>
				<td>79</td>
			</tr>
			<tr>
				<td>2</td>
				<td>92</td>
				<td>85</td>
				<td>88</td>
			</tr>
		</table>

image.png