您的位置：首页 > Web前端 > HTML

HTML的表格应用

2016-03-06 21:29 519 查看
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>



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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航