パイソンギャングスターは計画を策定---- HTMLのWebデザイン(形)

合理的な計画へのページ、ページレイアウトを作成します。例えば、ページテーブルは、上部中央、下部に上側保持ロゴ画像またはページのタイトルを分割することができる追加するために、中間部の全内容は、メインページで、関連する製造情報の底部です。また、ユニットはまたジェリー細胞、サブカテゴリ、階層的な合理的な計画の内容を追加することができます。

表タグ--table

それは二重のラベルです。表には、<表>、<TR>、<TD>三つの基本的な要素が含まれています。タグ<TABLE>タグおよびテール</ TABLE>を開くテーブルの開始と終了を示します。「TR =表の行は、」「TD =テーブルデータ」、ラインの開始と終了を示すために使用される細胞株の開始と終了を示すために使用されます。

<table>
<tr>
    <td>单元格内容</td>
    <td>单元格内容</td>
</tr>
<tr>
    <td>单元格内容</td>
    <td>单元格内容</td>
</tr>
...
</table>

タイトル--captionテーブル

表の最初の行に位置するヘッダーセルと呼ばれる特殊な細胞が存在する、ヘッダ細胞は国境ではない、デフォルトでセンタリング。

<caption>表格的标题</caption>

表ボーダー--border

デフォルトでは、テーブルには表示されません。より良いコンテンツを区別するために、テーブル境界線の幅サイズを提供することができます、

<table border='边框属性'>

--cellpaddingからテキストとの国境の形で

デフォルトでは、国境にテキストがあります。あなたはCELLPADDINGにより、テキストと境界の間の距離を調整することができます

<table cellpadding='文字与边框的距离'>

--cellspacingにおけるセル間テーブル距離

セル間テーブル距離も変化させることができます。

<table cellspacing='单元格之间的距离'>

セルの背景画像--background

<table background='图片'>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小白</title>
</head>
<body>
<div>默认情况下的表格</div>
<table border="2" align="center">
    <caption>亚洲</caption>
    <tr>
        <td>中国</td>
        <td>北京</td>
        <td>1949年10月1日</td>
    </tr>
    <tr>
        <td>缅甸</td>
        <td>内比都</td>
        <td>1948年1月4日</td>
    </tr>
</table>
<hr/>
<div>设置属性后的表格</div>
<!--bgcolor:行背景颜色-->
<table cellpadding="15" cellspacing="10" border="2" bgcolor="#8fbc8f" align="center">
    <caption>亚洲</caption>
    <tr>
        <td>中国</td>
        <td>北京</td>
        <td>1949年10月1日</td>
    </tr>
    <tr>
        <td>缅甸</td>
        <td>内比都</td>
        <td>1948年1月4日</td>
    </tr>
</table>
</body>
</html>

画像のキャプション

連結財産です--rowspan

いくつかの複雑な形態の製造では、セルのマージを使用する必要があります

<td row='需要合并的行数'>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单元格行合并</title>
</head>
<body>
<table border="1" align="center" width="600" height="300">
    <caption>招生简章</caption>
    <tr>
        <td rowspan="3">基础科目</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>外语</td>
    </tr>
    <tr>
        <td>政治</td>
    </tr>
    <tr>
    <td>专业课</td>
    <td bgcolor="#bc8f8f">100</td>
</table>
</body>
</html>

画像のキャプション

プロパティに列--colspan

いくつかの複雑な形態の製造では、セルのマージを使用する必要があります

<td row='需要合并的列数'>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单元格列合并</title>
</head>
<body>
<table border="1" align="center" width="600" height="300" cellpadding="30">
    <tr>
        <td colspan="3" align="center">西安</td>
    </tr>
    <tr>
        <td>长安区</td>
        <td>雁塔区</td>
        <td>碑林区</td>
    </tr>
    <tr>
        <td>新城区</td>
        <td>高新区</td>
        <td>莲湖区</td>
    </tr>

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

画像のキャプション

ネストテーブル

内部テーブルは、ページの様々な部品を作ると競合しない、全体の美しい構造を行うことができ、ページレイアウトのためにテーブルを使用して、他のタグが含まれています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格嵌套</title>
</head>
<body>
<table bgcolor="#8fbc8f" align="center">
    <caption>示例</caption>
    <tr>
        <td>昙花</td>
        <td>
            <img src="flower_02.jpg" height="300" width="200">
        </td>
        <td>
            <img src="flower_02.jpg" height="300" width="200">
        </td>
    </tr>
    <tr>
        <td>浏览器</td>
        <td>
            <a href="http://www.baidu.com" style="color: #f10180">百度</a>
        </td>
        <td bgcolor="#bc8f8f">
            <table border="1">
                <tr>
                    <td>百度贴吧</td>
                    <td>百度网盘</td>
                    <td>百度图库</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

画像のキャプション

おすすめ

転載: www.cnblogs.com/jlfw/p/11832446.html