学习学习

学习使我快乐

表格的基本标签如下

<table>  表格
<tr>       行
<td>      单元格
<table>   <!--表格开始-->
          <tr>  <!--行标签-->
               <td>....</td>  <!--列标签-->
               ......
          </tr>
          <tr>
               <td>....</td>
               ......
           </tr>
</table>   <!--表格结束-->

那么我们如何来写一个简单的表格呢?比如我要写一个两行三列的标签,如下图

大家可能发现了一个问题,首先看不到表格啊?

那是因为我们没有给表格设置可见属性(默认情况下表格是没有边线的),只需要如下设置

<table border="1"></table>

如下图所示,这下我们可以看到表格了

下面大家可以自己编写一个表格,我来演示一个先,如下图


大家可以随意的删除表格的tr或者td标签,自己增加tr或td标签自己测试一下规律

友情提示(表格的删除与增加一定要对应顺序,大家看 我的注释)

我们也可以给表格起一个标题。只需要再table标签下加入caption标签即可,caption标签可以让表格标题居中显示

第一行tr标签下,我们还可以加入th标签,th标签就代表了表格头,表格头的内容会加粗居中显示,一个表格只能有一个表格头。

浏览器一般是加载完全部表格才会显示,那么如果我们做的一个表格特别长特别复杂,那么加载时间就会长,这样的话用户体验就不好,那么我们就可以用表格结构标签,来实现浏览器分步显示表格内容。

表格划分三部分:表头,主体,脚注

thead:表格的头(放标题之类的内容)

tbody : 表格的主体(放表格数据主体)

tfoot : 表格的脚(放表格的脚注)

下面我来给大家演示一下

<table>
   <caption>表格标题</caption>
   <thead>
      <tr>
        <th>表头</ht>
       </tr>
   </thead>
   <tbody>
      <tr>
        <td>主题</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
        <td>脚注</td>
      </tr>
   </tfoot>
</table>


<table>标签属性
属性
描述
widthPixels(像素)、%
设置表格的宽度
alignleft、center、right表格相对周围元素的对齐方式
borderpixels表格边框的宽度
bgcolorrbg(x,x,x)、#xxxxxx、colorname表格的背景颜色
cellpaddingpixels、%单元边沿与其内容直接的空白
cellspacingpixels、%单元格之间的空白





frame

void

above

below

hsides

vsides

lhs

rhs

box

border

不显示外侧边框

显示上部的外侧边框

显示下部的外侧边框

显示上和下部的外侧边框

显示左和右的外侧边框

显示左边的外侧边框

显示右边的外侧边框

在所有四个边上显示外侧边框

在所有四个边上显示外侧边框



rules

none

groups

rows

cols

all

没有线条

位于行组和列组之间的线条

位于行之间的线条

位于列之间的线条

位于行与列之间的线条




<tr>标签属性
属性描述
alignleft,center,right,justify,char行内容的水平对齐
valigntop,middle,bottom,baseline行内容的垂直对齐
bgcolor.rbg(x,x,x)、.#xxxxxx、.colorname行的背景颜色



<td>与<th>标签属性
属性描述
alignleft,center,right,justify,char单元格内容的水平对齐
valigntop,middle,bottom,baseline单元格内容的垂直对齐
bgcolorrbg(x,x,x),#xxxxxx,colorname单元格的背景颜色
widthpixels,%单元格的宽度
heightpixels,%单元格的高度



<thead>、<tbody>、<tfoot>标签属性
属性描述
alignleft,center,right,justify,char水平对齐方式
valigntop,middle,bottom,baseline水平对齐方式

下来小白来为大家讲一下单元格的合并


colspan (跨列属性)

首先我列出一个未使用colspan的表格

<table>
   <tr>
     <td>...</td>
     <td>...</td>
     <td>...</td>
     <td>...</td>
   </tr>
</table>

那么使用后大家看一下表格代码的变化

<table>
  <tr>
    <td colspan="3">...</td>
    <td>...</td>
  </tr>
</table>

rowspan(跨行属性)


首先我列出一个未使用rowspan的表格

<table>
   <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
   </tr>
   <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
   </tr>
</table>

那么使用后大家看一下表格代码的变化

<table>
  <tr>
    <td>...</td>
    <td rowspan="3">...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

好啦,今天就跟大家聊到这里了,现在大家自己尝试做一下如下图的表格吧~


这里我附上我做的表格网页地址,大家可以去看一下源代码,一起对比学习呀~


本次教程的源代码

点我直达