HTML的表格应用

1)下面通过HTML的表格创建,逐步说明表格的标题和表格的对齐方式,其实现代码如下:

Table.html

<html>

<head>

<title>使用表格</title>

</head>

<body>

<table border = 2>

<caption align=top>学员档案信息</caption>

<!--  <table>代表表格的开始,border=2表示边框尺寸为2,<caption>表示表格标题,提供表格的说明-->

<tr>

   <th>姓名</th>  <!--姓名列默认左对齐-->

   <th align="center">性别</th>   <!-- 性别列居中  -->

<!-- <tr>表示行。<td>表示列,用于定义单元格。<th>表示行或列标题,粗体显示 -->

   <th align="right">分数</th>  <!--分数列右对齐   --> 

 </tr>

<tr>

   <td>Mary</td>

  <td align="center">F</td>

  <td align="right">18</td>

</tr>

<tr>

   <td>Robert</td>

   <td align="center">M</td>

   <td align="right">80</td>

</tr>

</table>

</body>

</html>

HTML的表格应用_第1张图片

2)下面通过HTML的表格创建,逐步说明表格尺寸、单元格合并及背景色等,实例效果如图所示。

Table2.html

<html>
<head>
<meta http-equiv="Content-Type“ content="text/html";charset=gb2312">
<title>表格测试</title>
</head>

<body>
<table width="474" height="192" border="1" align="center">
<!-- 表格的尺寸设置:  
例如:
<table width="200" height="100">
表示为一个长为200像素,宽为100像素的空格。
<table width=20% height=10%>    
表示一个宽为窗口的20%,高为窗口的10%的表格-->
<caption>
   表格测试
</caption>
<tr align="center">        <!-- 这一行的所有列均居中对齐   -->
     <th bgcolor="#0000FF">1</th>
     <th bgcolor="#0000FF">2</th>
<!-- 表格的颜色设置:
       表格的背景色 <table bgcolor=颜色值>
        行的背景色  <tr bgcolor=颜色值>
        列的背景色  <td bgcolor=颜色值>
颜色值可以采用RGB红绿蓝十六进制值表示,如红色#FF0000
  -->
       <th bgcolor="#0000FF">3</th>
</tr>
<tr align="center">
    <td bgcolor="#FF0000" >4</td>
    <td bgcolor="#FF0000" >5</td>
    <td rowspan="2">6</td>  <!-- ROWSPAN="n"  属性表示跨多少行 -->
</tr>
<tr align="center">
     <td colspan="2" bgcolor="red">7</td>    <!--COLSPAN="n" 属性表示跨多少列-->
   </tr>
</table>
</body>

</html>

HTML的表格应用_第2张图片

你可能感兴趣的:(HTML的表格应用)