HTMLテーブルの設定

HTML テーブル設定

HTML テーブルは、一般的に使用される Web ページ要素です。テーブルの形式でユーザーにデータを表示したり、CSS スタイルや JavaScript を通じて美しくしたり操作したりできます。この記事では、表をより美しく、読みやすくするために、HTMLで表の行、列、枠線、背景などの属性を設定する方法を紹介します。

1. HTML テーブルの作成

HTML テーブルは、テーブル ヘッダーとテーブル本体で構成されます。テーブルを作成するには、<table> タグを使用します。 。以下に示すように、テーブル ヘッダーは <thead> タグを使用して定義でき、テーブル本体は <tbody> タグを使用して定義できます。 ##ここで、

ラベルはテーブルの行を表し、 <th> ラベルはヘッダーの列を表し、 <td&gt ; ラベルはテーブル本体の列を表します。 3 つのタグ <thead>、<tbody>、<tfoot> はオプションですが、次のとおりである必要があることに注意してください。ネストするテーブル構造。 2. テーブルの行数と列数を設定します

rowspan と colspan を使用できます。 ; タグ属性を使用して、以下に示すようにテーブルの行数と列数を設定します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;标题1&lt;/th&gt; &lt;th&gt;标题2&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;数据1&lt;/td&gt; &lt;td&gt;数据2&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> このうち、

rowspan

属性は、またがる行数を設定するために使用されます。 colspan 属性は、セルがまたがる列の数を設定するために使用されます。上の例では、1 行目の最初のセルは 2 行にまたがり、3 行目のセルは 2 列にまたがります。 3. テーブルの境界線、マージン、背景を設定します

CSS スタイルで

border

、padding、background を使用できます。 -color 属性を使用して、以下に示すように、テーブルの境界線、マージン、および背景を設定します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;table&gt; &lt;tr&gt; &lt;td rowspan=&quot;2&quot;&gt;数据1&lt;/td&gt; &lt;td&gt;数据2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;数据3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan=&quot;2&quot;&gt;数据4&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

border-collapse

属性を使用してマージできることに注意してください。テーブルの縁取り、フォルムをより美しく。 4. テーブルの配置を設定する

CSS スタイルの

text-align

属性と vertical-align 属性を使用して設定できます。表の中国語テキスト 単語の配置は次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:css;toolbar:false;'>table { border-collapse: collapse; /* 合并边框 */ border: 1px solid black; /* 边框样式 */ width: 100%; /* 宽度100% */ margin-bottom: 20px; /* 底部边距20px */ background-color: white; /* 背景颜色为白色 */ } th, td { padding: 8px; /* 单元格边距为8px */ border: 1px solid black; /* 单元格边框样式 */ }</pre><div class="contentsignin">ログイン後にコピー</div></div> 上記の例では、

text-align

属性を使用してテキストの水平方向の配置を設定し、vertical-align 属性 テキストの垂直方向の配置を設定するために使用されます。 vertical-align 属性はテーブル内の行に対してのみ機能するため、th タグと td タグに適用することに注意してください。 概要

HTML テーブルは Web ページ制作で頻繁に使用される要素です。

<table>

、<thead># の使い方をマスターする必要があります。 # #、<tbody> およびその他のタグを使用してテーブルを作成する方法、および rowspan、colspan 属性を使用して行と列の数を設定する方法テーブルの中で。さらに、border、padding、background-color、text-align、vertical についても理解しておく必要があります。 CSS スタイルの -align 属性により、表がより美しく、読みやすくなります。

以上がHTMLテーブルの設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。