首页 > 代码库 > HTML/CSS基础教程 二

HTML/CSS基础教程 二

2024-07-05 02:59:08   225人阅读

表

表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<table>标签正是你需要的,有许多和表有关的标签,它们都以<table>开始.

表就是将一组数据用行列的形式排列,我们用<tr>标签创建一个表行(table row),<td>标签表示表数据(table date)
<!DOCTYPE html>

<html>
    <head>
        <title>Table Time</title>
    </head>
    
    <body>
        
        <table border="1px">
            <tr>
                <td>One</td>
            </tr>
                
            <tr>
                <td>Two</td>
            </tr>
            
            <tr>
                <td>Three</td>
            </tr>
        </table>
        
    </body>

</html>

上面这段代码产生如下表格:

one
twe
three
 
 
 
 

 

添加一列

上面创建了一个单列的表,如何添加一列呢?很简单,只要在每行添加一个数据元就可以了,例如下面的代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Table Time</title>
    </head>
    
    <body>
        
        <table border="1px">
            <tr>
                <td>baidu</td>
                <td>李彦宏</td>     
            </tr>
            
            <tr>
                <td>alibaba</td>
                <td>马云</td>
            </tr>
            
            <tr>
                <td>tencent</td>
                <td>马化腾</td>
            </tr>
        </table>
        
    </body>

</html>

产生如下表格:

baidu 李彦宏
alibaba 马云
tencent 马化腾

 

 

 

 

 

表头

我们应该在<thead>写入表头的内如,每个条目用<th>标签包裹,而将表的实际内容放入<tbody>.我们为上表添加<thead>和<tbody>,如下:

<!DOCTYPE html>
<html>
    <head>
        <title>Table Time</title>
    </head>
    
    <body>
        
        <table border="1px">
            <thead>
                <tr>
                    <th>BAT</th>
                    <th>CEO</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>baidu</td>
                    <td>李彦宏</td>     
                </tr>
                
                <tr>
                    <td>alibaba</td>
                    <td>马云</td>
                </tr>
                
                <tr>
                    <td>tencent</td>
                    <td>马化腾</td>
                </tr>
            </tbody>
        </table>
        
    </body>

</html>

修改后:

BAT ceo
baidu 李彦宏
alibaba 马云
tencent 马化腾

 

 

 

 

 

 表的名字

我们的表没有标题,我们想在表的最上方加一个标题行,怎么做?

我们将使用<th>的colspan属性,它默认占一列,我们可以指定它占的列数,像这样:

<th colspan="3">

我们在上表中的<thead>标签下加下面的代码即可产生一个标题:

<tr>
      <th colspan="2">BAT and its CEO</th>
</tr>

colspan=2表示占用俩列,这样我们就可以在表的上面产生这样一个标题:

    BAT and its CEO

 


PS:我们可以自由修改表元素的style属性


联系
我们