copyright

株式会社アイネックスはソフトウェアの開発、検証ツールの支援企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
検証ツールの支援と多岐にわたるソリューションを提供します。

galleria

05-01)　　1. テーブルの基本装飾

HTML形式で表示
styleでcss要素のプロパティの設定をする。

ｃｓｓの書き方 ------
HTMLの使用例 <table style="width:420px;margin-left:50px;">
  <tr>
    <th>日付</th>
    <th>行き先</th>
    <th>金額</th>
  </tr>
  <tr>
    <td>6/8</td>
    <td>横浜</td>
    <td>1000円</td>
  </tr>
</table>
日付 行き先 金額
6/8 横浜 1000円
6/9 関内 2000円

05-01)　　2. テーブルの枠表示

テーブルの枠を表示
ﾃｰﾌﾞﾙの枠を実線（solid）、枠の幅（border-width:2px）で表示する。

ｃｓｓの書き方 .tbl_902 {
  width: 420px;
  text-align: center;
  border-collapse: collapse;
  border-style: solid;
  border-width: 2px;
}
HTMLの使用例 <table class="tbl_902">
  <tr>
    ---- 上記同様　----
  </tr>
</table>
日付 行き先 金額
6/8 横浜 1000円
6/9 関内 2000円

05-01)　　3. 横型テーブルの枠表示(ｾﾙ枠線間隔無し)

横型テーブルを表示
テーブルの枠線(border)、ヘッダ部ｾﾙの枠線(border)、データ部ｾﾙの枠線(border)がある。
データを行の単位で追加する。

ｃｓｓの書き方 .tbl_903 {
text-align: center;
  width: 420px;
  border-collapse: collapse;
  border: 2px #cc0000 solid; /* 赤線　*/
}
.tbl_903 th{
  border: 2px #003399 solid; /*　青線　*/
}
.tbl_903 td{
  border: 2px #009900 solid; /*　緑線　*/
}
HTMLの使用例 <table class="tbl_903">
  <tr>
    ---- 上記同様　----
  </tr>
</table>
日付 行き先 金額
6/8 横浜 1000円
6/9 関内 2000円

05-01)　　4. 縦テーブルの枠表示(ｾﾙ枠線間隔無し)

縦型テーブルを表示
行単位にヘッダー部(th)を設定する。
データを列の単位で追加する。

ｃｓｓの書き方    ---- 上記同様　----
HTMLの使用例 <table class="tbl_903">
  <tr>
  <th>日付</th>
  <td>6/8</td>
  <td>6/9</td>
  </tr>
  <tr>
  <th>行き先</th>
  <td>横浜</td>
  <td>関内</td>
  </tr>
  <tr>
  <th>金額</th>
  <td>1000円</td>
  <td>2000円</td>
  </tr>
</table>
日付 6/8 6/9
行き先 横浜 関内
金額 1000円 2000円

05-01)　　5. 横型テーブルの枠表示(ｾﾙ枠線間隔有り)

日付 行き先 金額
6/8 横浜 1000円
6/9 関内 2000円

05-01)　　6. 横型テーブルの枠表示 (ｾﾙ枠線間隔有り)

日付 6/8 6/9
行き先 横浜 関内
金額 1000円 2000円