HTML5基础之-表格标签

时间:2022-11-23 09:45:20
表格标签 笔记显示效果:


HTML5基础之-表格标签




HTML5基础之-表格标签




HTML5基础之-表格标签


以上效果,下面是代码加注释:

<!doctype html><!--声明兼容所有浏览器的-->
<html>
<head>

<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title>HTML标签的特殊符号</title><!--标题-->
<meta name="Keywords" content="关键词,关键词,关键词">

</head>


<body>
<ul>
<li>*表格标签(**重要的标签**)</li>
<li> 可以对数据进行格式化,使得数据更加的清晰,显著。
</ul>
<br/><br/>
<hr size="5" color="red"/>
表格标签 :<br/>
<table></table>
<br/>

**在table里面有<tr></tr>表示行<br />
  **在tr里面有<td></td>表示列(表示单元格)<br />
**操作技巧:<br/>
  -首先数有多少行,每行里面有多少个单元格。<br/>
  --border:表格线<br/>
  --bordercolor:表格线颜色</br>
  --cellspacing:单元格的距离</br>
   --width:表格的宽度</br>
   --height:表格的高度</br><br/><br />

**在table里面<tr></tr>
  --设置显示方式 align:(left,center,right)<br/>
在-td-有同样的属性,--th--也可以表示单元格<br/>
**这里使用=小红居右

**th标签:<br/>
  可以居中和加粗<br/><br/>

**表格标题:<br/>
  <caption>人员信息</caption><br/><br/>

<table border="1" bordercolor="red" cellspacing="0" width="400" height="150"><!--cellspacing=""设置间隙,height=""设置高度,width=""设置宽度--><br/><br/><br/>

<caption>人员信息(这是标题标签caption的效果)</caption>

<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>

<tr align="center">
<td>小明</td>
<td>男</td>
<td>15</td>
</tr>

<tr align="center">
<td align="right">小红</td>
<td>女</td>
<td>15</td>

</tr>
<tr align="center">
<td>小军</td>
<td>男</td>
<td>15</td>

</tr>

</table>
<br/>
<br/>
<hr size="5" color="red"/>
<br/>
<br/>
 **合并单元格:
  --rowspan跨行。
  --colspan跨列。
<table border="1" bordercolor="red" cellspacing="0" width="400" height="150"> <br/><br/><br/>

<caption>人员信息(这是标题标签caption的效果)</caption>

<tr align="center">
<td colspan="3">人员信息</td>

</tr>


<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>

<tr align="center">
<td>小明</td>
<td>男</td>
<td>15</td>
</tr>

<tr align="center">
<td>小红</td>
<td>女</td>
<td>15</td>

</tr>

<tr align="center">
<td>小军</td>
<td>男</td>
<td>15</td>

</tr>

</table>

<hr size="5" color="red"/>
<br/>
<br/>
<br/>

<table border="1" bordercolor="red" cellspacing="0" width="400" height="150">
<caption>人员信息(这是标题标签caption的效果)</caption>

<tr align="center">
<td colspan="3">人员信息</td>
</tr>


<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>

<tr align="center">
<td>小明</td>
<td>男</td>
<td rowspan="3">15</td><!--跨行操作在这里-->
</tr>

<tr align="center">
<td>小红</td>
<td>女</td>
</tr>

<tr align="center">
<td>小军</td>
<td>男</td>
</tr>

</table>


</body>
</html>

这里写的有点乱不要见怪。