株式会社アイネックスはソフトウェアの開発、データ復旧サービス、ホームページの作成ツール企業です。

横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
    データ復旧サービス、ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

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

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

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)で表示する。

cssの書き方 .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)がある。
データを行の単位で追加する。

cssの書き方 .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)を設定する。
データを列の単位で追加する。

cssの書き方    ---- 上記同様 ----
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円