Utilisez le tableau de forme

Formulaire table

Maintenant, former une étiquette sensiblement commune utilisée il y a quelques années à l'extrémité avant de l'industrie de la table de mise en page, le traitement, les données tabulaires d'affichage. Cette année, parce que la page devait apporter la normalisation pour permettre DIV + mise en page CSS provoqué une reconstruction majeure sanglantes, les étudiants intéressés sur leurs propres Baidu.

Créer une table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <!-- 跟无序列表一样，table里面只能嵌套tr标签 -->
    <!-- table的属性有：边框-border 单元格与边框的间隙-cellspacing  单元格内容的间隙-cellpading  单元格宽度-width  单元格高度-height  水平对齐方式-align:left center right -->
    <!-- cellspacing 单元格与边框的距离   cellpading 内容与单元格之间的距离 -->
    <!-- 一般三参为：0  border  cellspacing  cellpading -->
    <table width="1000px" align="center" border="1px" cellspacing="0" cellpading="0" height="300px">
        <tr align="center">
            <td>姓名</td>
            <td>性别</td>
            <td>工资</td>
        </tr>
        <tr align="center">
            <td>小红</td>
            <td>女</td>
            <td>500</td>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>男</td>
            <td>500</td>
        </tr>
    </table>
</body>
</html>

Insérer ici l'image Description
1.table utilisé pour définir une forme.

2.tr utilisé pour définir la ligne de la table, doit être emboîté dans la table d'étiquettes, comprenant plusieurs paires B dans le tableau, il y a plusieurs lignes de la table.

3.td: une table de définition de cellule, tr balise doit être imbriquée dans la paire contient plusieurs paires tr td, cela signifie que le nombre de colonnes dans la rangée (ou le nombre de cellules).
Insérer ici l'image Description

balises d'en-tête

Habituellement cellule en-tête dans un tableau ou une première colonne d'une première rangée qui est centré texte en gras, comme indiqué ci-dessous, qui est fourni avec un en-tête de la table. tête Set est aussi facile que la balise d'en-tête remplacé par e correspondant à l'étiquette de la cellule td.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表头标签</title>
</head>
<body>
    <!-- 表格标题一般用caption标签定义，体现出是一个整体 -->
    <!-- 一般表头用th取代td标签，表头内容自动加黑变粗居中 -->
    <table width="1000" align="center" border="0" cellspacing="0" cellpading="0" >
        <caption>我是表格标题</caption>
        <tr align="center">
            <th>姓名</th>
            <th>性别</th>
            <th>工资</th>
        </tr>
        <tr align="center">
            <td>小红</td>
            <td>女</td>
            <td>500</td>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>男</td>
            <td>500</td>
        </tr>
    </table>
</body>
</html>

Insérer ici l'image Description
les étiquettes des sous - titres doivent immédiatement après la balise de table.
Il y a seulement une à l' intérieur de la table.

Les cellules de fusion

fusion Interbank: rowspan sur plusieurs colonnes de fusion: colspan

Fusionner idées cellules:

Le temps plus de contenu de la fusion, il y aura des choses supplémentaires, supprimez-le. Par exemple les trois td combinés en un seul, il serait redondant de deux, doivent être enlevés.

Formule: Le nombre de supprimé = numéro de fusion --1

Le premier ordre combiné de la première à gauche et à l'arrière droit

Tout d'abord déterminer les marchés interbancaires à travers des colonnes ou fusion
Trouver la cellule cible sur une première sur le premier gauche et à droite
Le nombre de cellules de suppression supprimé = nombre de combinés --1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <!-- 合并单元格  跨行合并：rowspan   跨列合并：colspan -->
    <table width="500" border="1" cellspacing="1" cellpadding="1" >
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>工资</td>
            <td>部门</td>
            <td>特殊说明</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>3500</td>
            <td>设计</td>
            <td rowspan="2">rowspan</td>
        </tr>        
        <tr>
            <td>小红</td>
            <td>女</td>
            <td>3000</td>
            <td>后端</td>
        </tr>
    </table>
    <table width="500" border="1" cellspacing="1" cellpading="1" >
        <tr>
            <td>小红</td>
            <td>小明</td>
            <td>小王</td>
        </tr>
        <tr>
            <td colspan="3">colspan</td>
        </tr>
    </table>    
</body>
</html>

Insérer ici l'image Description
Parce que n'est pas couramment utilisé maintenant ou même pas accès à base, nous avons une meilleure mise en page, table comprise comme une forme d'apprentissage.

Chen heureux i

Publié 23 articles originaux · louanges gagnées 0 · Vues 194

lettre privée préoccupations