提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

【HTML】HTML 表格 ① ( 表格标签 | 行标签 | 单元格标签 | table 表格属性 | border 属性 | align 属性 | width 属性 | height 属性 )

属性HTML Table 标签 表格 单元格 width height
2023-06-13 09:18:07 时间

文章目录

一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 )

HTML 表格 由 3 种标签 组成 : 表格 涉及 的标签都是 双标签 ;

  • 表格标签 : 表格最 外围的标签 , 用于包裹整个表格 ; 其中 包含若干 tr 行标签 ;
	<table>整个表格内容</table>
  • 行标签 : 标签内是 一行的内容 , 其中 包含若干 td 标签 ;
	<tr>表格中一行的内容</tr>
  • 单元格标签 : 表格中一个单元格中的内容 , 只包含一个单元格的文本 ;
	<td>单元格文本内容</td>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 整个表格内容 -->
		<table>
			<!-- 表格中一行的内容 -->
			<tr>
				<!-- 表格中单个单元格内容 -->
				<td>姓名</td>
				<td>年龄</td>
			</tr>
			<tr>
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

网页效果 :

二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 )

table 表格属性 :

  • border 属性 : 属性值 为 像素值 ; 设置边框 , 默认 0 像素 无边框 ;
  • cellspacing 属性 : 属性值 为 像素值 ; 设置 单元格边框 之间的 间距 , 默认 2 像素 ;
  • cellpadding 属性 : 属性值 为 像素值 ; 设置 单元格边框 与 单元格内容 之间的 间距 , 默认 1 像素 ;
  • width 属性 : 属性值 为 像素值 ; 设置 表格宽度 ;
  • height 属性 : 属性值 为 像素值 ; 设置 表格高度 ;
  • align 属性 : 可设置 left , center , right 等属性值 ; 用于设置 整体表格 在 网页中的 水平对齐方式 ;
    • 设置 left , 表格在网页左侧 ;
    • 设置 center , 表格在网页水平居中 ;
    • 设置 right , 表格在网页右侧 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 整个表格内容 -->
		<table border="1" width="500" height="200" 
			   align="center" cellpadding="10" cellspacing="0">
			<!-- 表格中一行的内容 -->
			<tr>
				<!-- 表格中单个单元格内容 -->
				<td>姓名</td>
				<td>年龄</td>
			</tr>
			<tr>
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

网页效果 :

相关文章