Comment les tableaux HTML doivent-ils être disposés ?-tutoriel HTML-php.cn

Comment les tableaux HTML doivent-ils être disposés ?

php中世界最好的语言

Libérer： 2018-01-23 10:57:47

original

2378 Les gens l'ont consulté

Cette fois, je vais vous montrer comment mettre en page des tableaux HTML, et quelles sont les précautions lors de la mise en page de tableaux HTML. Ce qui suit est un cas pratique, jetons un coup d'œil.

Les éléments du document HTML sont disposés les uns après les autres. Nous ajoutons simplement des sauts de ligne avant et après les éléments au niveau du bloc, ce qui constitue une mise en page simplifiée. Cependant, les pages Web que nous voyons sont disposées selon certaines règles (généralement sur plusieurs colonnes), nous devons donc utiliser certaines méthodes pour réaliser cette disposition. La solution habituelle est : utiliser l'élément block ) pour présenter le contenu d'une page Web.

L'utilisation de tableaux pour la mise en page est une solution de mise en page plus ancienne. Ce n'est pas recommandé, nous devons toujours utiliser des tableaux pour afficher les données tabulées.

Document HTML

<!DOCTYPE html>   
<html lang="en">   
<head>   
    <meta charset="UTF-8">   
    <!-- 链接到外部样式表 -->   
    <link rel="stylesheet" href="css/mystyle.css">   
    <title>Island estaurant</title>   
</head>   
<body>   
    <table id="container">   
        <!-- 头部 -->   
        <tr>   
            <td id="header" colspan="2">   
                <h1>点菜系统</h1>   
            </td>   
        </tr>   
        <!-- 主体 -->   
        <tr>   
            <!-- 菜单 -->   
            <td id="menu">   
                <b>菜品</b><br>   
                <div id="dishes">   
                    小鸡炖蘑菇<br>   
                    家常豆腐<br>   
                    酸辣土豆丝<br>   
                </div>   
            </td>   
            <!-- 内容 -->   
            <td id="content">   
                小鸡炖蘑菇：<br>   
                幼鸡一只   
            </td>   
        </tr>   
        <!-- 尾部 -->   
        <tr>   
            <td id="footer" colspan="2">世俗孤岛的餐厅</td>   
        </tr>   
    </table>   
</body>   
</html>   
CSS 文件
/*整个点餐系统的界面*/  
#container   
{   
    width: 600px;   
    margin: 100px;   
    /*取消单元格边框之间的边距*/  
    border-spacing: 0;   
}   
/*点餐系统界面的头部*/  
#header  
{   
    background-color: red;   
    text-align: center;   
}   
h1   
{   
    margin-bottom: 0px;   
}   
/*点餐系统界面的菜单*/  
#menu  
{   
    background-color: #FFD700;   
    height: 200px;   
    width: 150px;   
}   
#dishes  
{   
    padding-top: 10px;   
    padding-left: 10px;   
    line-height: 20px;   
}   
/*点餐系统界面的菜品详情*/  
#content   
{   
    background-color: gray;   
    height: 200px;   
    width: 450px;   
}   
/*点餐系统界面的尾部*/  
#footer  
{   
    background-color: blue;   
    height: 25px;   
    text-align: center;   
}

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment rendre le contenu d'une page Web mobile adaptatif

Comment gérer le débordement de contenu dans les tableaux

Quelles sont les différences entre iframe et frame en HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!