Web前端(6)_表格

 

一、表格的基本結構

 

二、跨行的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行級標籤</title>
</head>
<body>
<table border="1">
   <tr>
       <td colspan="3">學生成績表</td>
   </tr>
    <tr>
        <td>英語</td>
        <td>數學</td>
        <td>語文</td>
    </tr>
    <tr>
        <td>95</td>
        <td>99</td>
        <td>99</td>
    </tr>
</table>
</body>
</html>
View Code

三、跨列的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行級標籤</title>
</head>
<body>
<table border="1">
   <tr>
       <td rowspan="3" >早上菜譜</td>
        <td>食物</td>> <td>雞蛋</td>
    </tr>
   </tr>

    <tr>
        <td>甜點</td>
        <td>蛋撻</td>
    </tr>

    <tr>
        <td>食物</td>> <td>雞蛋</td>
    </tr>
</table>
</body>
</html>
View Code

 

 

四、跨行跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行級標籤</title>
</head>
<body>
<table border="1">
   <tr>
       <td rowspan="2" >阿里巴巴旗下網站</td>
        <td>我要買</td>
        <td>我淘寶</td>
        <td>我淘寶</td>
    </tr>
    <tr>
        <td colspan="3"> 歡迎來到淘寶</td>
    </tr>

</table>
</body>
</html>

相關文章
相關標籤/搜索