HTML表格的基本结构标记<table>标记
1.基本格式：<table 属性1="属性值1" 属性2="属性值2" ... ...>表格内容</table>
2.table标记的属性
  width属性  表⽰表格的宽度，他的值可以是像素（px）也可以是⽗级元素的百分⽐（%）  height属性  表⽰表格的⾼度，他的值可以是像素（px）也可以是⽗级元素的百分⽐（%）  border属性  表⽰表格外边框的宽度
html frame
  align属性  表格的显⽰位置
    值：
      1.left居左显⽰
      2.center居中显⽰
      3.right居右显⽰
      默认值left
  cellspacing属性  单元格之间的间距，默认是2px，单位像素
  cellpadding属性  单元格内容与单元格边框的显⽰距离，单位像素
  frame属性
    1.作⽤：控制表格边框最外层的四条线框
    2.属性值：
      void（默认值）  表⽰⽆边框
      above  表⽰仅顶部有边框
      below  表⽰仅有底部边框
      hsides  表⽰仅有顶部边框和底部边框
      lhs  表⽰仅有左侧边框
      rhs  表⽰仅有右侧边框
      vsides  表⽰仅有左右侧边框
      box  包含全部4个边框
      border  包含全部4个边框
  rules属性
    1.作⽤：控制是否显⽰以及如何显⽰单元格之间的分割线
    2.属性值：
      none（默认值）  表⽰⽆分割线
      all  表⽰包括所有分割线
      rows  表⽰仅有⾏分割线
      clos  表⽰仅有列分割线
      groups  表⽰仅在⾏组和列组之间有分割线
<caption>标记
1.使⽤时候：表格需要标题的时候使⽤
2.正确使⽤：<caption>属性的插⼊位置，直接位于<table>属性之后，<tr>表格⾏之前
3.align属性
  top  标题放在表格的上部
  bottom  标题放在表格的下部
  left  标题放在表格的左部
  right  标题放在表格的右部
<tr>标记
1.使⽤：定义表格的⼀⾏，对于每⼀个表格⾏，都是由⼀对<tr>...</tr>标记表⽰，每⼀⾏<tr>标记内可以嵌套多个<td>或者<th>标记
2.可选属性：
  bgcolor属性：设置背景颜⾊
    格式：bgcolor="颜⾊值"
  align属性：设置垂直⽅向对齐⽅式
    格式：align="值"
    值：
      1.bottom  靠顶端对齐
      2.top  靠底部对齐
      3.middle  居中对齐
  valign属性：设置⽔平⽅向对齐⽅式
    格式：valign="值"
    值：
      1.left  靠左对齐
      2.right  靠右对齐
      3.center  居中对齐
<td>和<th>
1.<td>和<th>都是单元格的标记，其必须嵌套在<tr>标签内，是成对出现
2.两者的区别：
  <th>是表头标记，通常位于⾸⾏或者⾸列，<th>中的⽂字默认会被加粗，⽽<td>不会
  <td>是数据标记，表⽰该单元格的具体数据
3.共同之处：
  两者的标记属性都是⼀样的
4.属性
  bgcolor  设置单元格背景
  align  设置单元格对齐⽅式
  valign  设置单元格垂直对齐⽅式
  width  设置单元格宽度
  height  设置单元格⾼度
  rowspan  设置单元格所占⾏数
  colspan  设置单元格所占列数
<html>
<head>
<title>表格</title>
<meta charset="utf-8">
</head>
<body>
<table width="960" height="250" border="1" align="center" cellpadding="10" rules="all"> <caption align="bottom">表格的标题</caption>
<tr bgcolor="#ccc" align="center" valign="center">
<th bgcolor="red" align="left" rowspan="2" colspan="2">班级</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td>四年级⼀班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
<tr>
<td>四年级⼀班</td>
<td>李四</td>
<td>14</td>
<td>90</td>
</tr>
<tr>
<td>四年级⼀班</td>
<td>王五</td>
<td>18</td>
<td>50</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>表格制作成绩表</title>
<meta charset="UTF-8">
</head>
<body>
<table width="960" align="center" border="1" rules="all" cellpadding="15">
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>四年级1班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
<tr align="center">
<td>四年级1班</td>
<td>李四</td>
<td>13</td>
<td>90</td>
</tr>
<tr align="center">
<td>四年级1班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
</table>
<br/>
<table width="960" align="center" border="1" rules="all" cellpadding="15">
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>四年级1班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
<tr align="center">
<td>四年级1班</td>
<td>李四</td>
<td>13</td>
<td bgcolor="#ccc"></td>
</tr>
<tr align="center">
<td>四年级1班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
</table>
<br/>
<table width="960" align="center" border="1" rules="all" cellpadding="15">
<tr bgcolor="#ccc">
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>四年级1班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
<tr align="center">
<td>四年级1班</td>
<td>李四</td>
<td>13</td>
<td bgcolor="red"><font color="white">53</font></td>
</tr>
<tr align="center">
<td>四年级1班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
</table>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。