HTML 表格的使用方法

最新推荐文章于 2024-09-20 21:04:52 发布

chen983234416

最新推荐文章于 2024-09-20 21:04:52 发布

阅读量1.3k

点赞数 2

分类专栏： html、css、javascript 前端标签文章标签：表格前端 html

本文链接：https://blog.csdn.net/chen983234416/article/details/84105154

版权

html、css、javascript 同时被 3 个专栏收录

47 篇文章 1 订阅

订阅专栏

前端

42 篇文章 0 订阅

订阅专栏

标签

9 篇文章 0 订阅

订阅专栏

首先我先把所有熟悉的都列举出来，包括表格一些最常用的属性，很生僻的我就不列举啦，要是想要了解的话，到W3C手册上查询。首先表格的开始是由<table></table>标签引导的，接下来我先写出所有的标签，以及属性，然后在它们的旁边做一一的解释。

<table>: 表格的引导标签。

border="1": 设置表格的边框宽度，单位为像素。

width="200px" height="200px": 设置表格的宽度和高度，单位为像素或者百分比。

cellspacing="0" : 表示边框和边框的距离为0，其实表达的意思就是：合并边框。

cellpadding="10px" ：表示单元格里面的内容到单元格四壁的距离：单位可以是像素和百分比。

bgcolor="green" ：背景颜色设置为绿色。

bordercolor="#FFFFFF" : 边框的颜色设置为黑色。

这里解释一下颜色的两种表示一种是green，还有一种是16进制，以#开始#FFFFFF。

align="center" vlign="top/middle/bottom"：分别为水平和垂直居中，这里是设置在table上，表示的是整体的居中，如果设置在tr上面就表示里面的文字水平或者是垂直居中

<caption>课程表</caption> ：表示表格的标题，显示在最上面，默认居中显示

<th>：设置表格中的表头，重点。其实就是加粗td上面的内容，参考td 然后加上strong

<tr>：分割一行

<td colspan="3">：分割每一个单元格

colspan="3"：跨越的列数为3

rowspan="3"：跨越的行数为3

</td >

</td >

</tr>

</table>

最后我用一个课程表的例子来演示上面所用到的内容：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>课程表</title>
   </head>
   <body>
       <table border="1" cellspacing="0" align="center" cellpadding="10px">
           <caption><p><strong>高一课程表</strong</p></caption>
           <tr bgcolor="aqua" align="center">
               <th bgcolor="red">星期</th>
               <th>星期一</th>
               <th>星期一</th>
               <th>星期一</th>
               <th>星期一</th>
               <th>星期一</th>
               <th>星期一</th>
               <th>星期一</th>
           </tr>
           <tr align="center">
               <th>晨读</th>
               <td>语文</td>
               <td>语文</td>
               <td>语文</td>
               <td>语文</td>
               <td>语文</td>
               <td>语文</td>
               <td>语文</td>
           </tr>
           <tr align="center">
               <th rowspan="4">上午</th>
               <td>数学</td>
               <td>数学</td>
               <td>数学</td>
               <td>数学</td>
               <td>数学</td>
               <td>数学</td>
               <td>数学</td>
           </tr>
           <tr align="center">

               <td>外语</td>
               <td>外语</td>
               <td>外语</td>
               <td>外语</td>
               <td>外语</td>
               <td>外语</td>
               <td>外语</td>
           </tr>
           <tr align="center">

               <td>政治</td>
               <td>政治</td>
               <td>政治</td>
               <td>政治</td>
               <td>政治</td>
               <td>政治</td>
               <td>政治</td>
           </tr>
           <tr align="center">

               <td>历史</td>
               <td>历史</td>
               <td>历史</td>
               <td>历史</td>
               <td>历史</td>
               <td>历史</td>
               <td>历史</td>
           </tr>
           <tr align="center">
               <td colspan="8"></td>

           </tr>
           <tr align="center">
               <th rowspan="4">下午</th>
               <td>物理</td>
               <td>物理</td>
               <td>物理</td>
               <td>物理</td>
               <td>物理</td>
               <td>物理</td>
               <td>物理</td>
           </tr>
           <tr align="center">

               <td>化学</td>
               <td>化学</td>
               <td>化学</td>
               <td>化学</td>
               <td>化学</td>
               <td>化学</td>
               <td>化学</td>
           </tr>
           <tr align="center">

               <td>地理</td>
               <td>地理</td>
               <td>地理</td>
               <td>地理</td>
               <td>地理</td>
               <td>地理</td>
               <td>地理</td>
           </tr>
           <tr align="center">

               <td>生物</td>
               <td>生物</td>
               <td>生物</td>
               <td>生物</td>
               <td>生物</td>
               <td>生物</td>
               <td>生物</td>
           </tr>
       </table>
   </body>
</html>