ホームページ > ウェブフロントエンド > htmlチュートリアル > html_html/css_WEB-ITnose でテーブルの表示を改善する方法

html_html/css_WEB-ITnose でテーブルの表示を改善する方法

WBOY
リリース: 2016-06-24 11:17:36
オリジナル
950 人が閲覧しました

HTML ファイルの記述では、いくつかのテーブルを作成するために table がよく使用されます。より表のように表示するにはどうすればよいでしょうか?次に説明します。

基本フォーマット

<div>            <th>我的一张表格</th>            <table border="1">                <tr>                    <th>姓名</th>                    <th>年龄</th>                    <th>班级</th>                </tr>               <tr>                    <td>张山</td>                    <td>20</td>                    <td>计算机1班</td>                </tr>            </table></div>
ログイン後にコピー

表示効果は次のとおりです:

幅を広げるには、テーブルの width 属性を設定するだけです。セルを実線で区切る場合は、表のセルスペース = 0 を設定します。セル内のコンテンツとセルの境界線の間の距離を 0 にしたい場合は、テーブルの cellpadding=0 を設定し、各セルの高さを増やしたい場合は、各 < で height=40 属性を設定します。 td>タグ。

<div>            <th>我的二张表格</th>            <table border="1" cellspacing="0" cellpadding="0" width="400" >                <tr>                    <th>姓名</th>                    <th>年龄</th>                    <th>班级</th>                </tr>               <tr>                    <td height="40">张山</td>                    <td >20</td>                    <td >计算机1班</td>                </tr>            </table>        </div>
ログイン後にコピー

表示効果は次のとおりです:

テキストを中央に表示したい場合は、td の align 属性を設定できます。

<div>            <th>我的三张表格</th>            <table border="1" cellspacing="0" cellpadding="0" width="400">                <tr>                    <th>姓名</th>                    <th>年龄</th>                    <th>班级</th>                </tr>               <tr>                    <td align="center"  height="40">张山</td>                    <td align="center">20</td>                    <td align="center">计算机1班</td>                </tr>            </table>        </div>
ログイン後にコピー

表示効果は次のとおりです:

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート