KinutaHandicraft log
    ヒ ン ト 集
■ ヒントだよ!HTML & CSS ■
    topへ          HTML     CSS     表計算利用     ファイル     色指定     ソフト/機材     参考書など     単位     記号の例
    基本(タグ)     概要(タグ化)     詳細
    半角コード表     記号の名称     表計算入力方法     よく使う関数
■ 表計算を利用するテーブル(表)作成
表計算のシートデータを管理すれば、ソートなどが利用できるので、集計結果をHTMLに貼り付けるのが便利です。
HTML作成ソフトに貼り付ける方法では、セルの修飾が面倒臭かったり、そのままファイルサイズにカウントされる、空白やTabが多数入るなどの欠点があります。
そこで、シートデータを式で書式を含めたタグにして、HTMLソースとして貼り付ける方法を紹介します。
▲このページ一番上へ
● 基本(tableタグ関連)
テーブル(表)は、
<table>~</table>で指定します。
行は<tr>~</tr>で表し、各セルは<td>~</td>で表します。
表に罫線がある場合、空セルでも罫線を表示させるために、半角空白を意味する&nbsp;を入れておき、
<td>&nbsp;</td>とするのがいいです。
<th>~</th>は表の見出しとなっています。<td>で置き換えると、<td>と中央揃えとボールド(太字)で置き換えることが出来ます。
CSSをクラス設定にしておくと、柔軟なcss指定が出来ます。
当サイトの例では、罫線表示の表の表示以外に罫線非表示のテーブルで文字列の整形をしていたりします。
例1:<td class="中央配置のcss">~</td>
例2:<td class="右寄せのcss">~</td>
※<td>~</td>の標準は、「左寄せ」です。

 
<tabel borer="~" cellspacing="~" cellpadding="~" >の属性使用が禁止になったので、
<table border=1" cellspacing="0" cellpadding="0">をCSSで表現すると、
table用cssは
border: 1px solid #000000; border-collapse: collapse;
となり
td用cssは、border: 1px solid #000000;
となります。
____1____ ____2____
____3____ ____4____
 
<table border="1">の場合は、
table用cssは
border: 1px solid #000000; border-collapse: separate;
となり
td用cssは、border: 1px solid #000000;
となります。
____1____ ____2____
____3____ ____4____

なお、<table> こと <table bordecr="0">の場合、cssの指定は必要ありません。
▲このページ一番上へ
● 概要(表作成の流れ)
  1. 表計算で入力値・編集・ソートの処理をしておく。
  2. 各セルの内容を式を使ってタグ化する。
  3. 各行の式を文字結合し、次に文字列</tr><tr>を結合する。
  4. タグ化式を行数分コピー&ペーストする。
  5. テキストエディター側でhtmlファイル内に[<table><tr>~</tr><table>を書いておく。
  6. 結合したタグ式をコピーし、テキストエディターの<table><tr>と</tr><table>の間にペーストする。
  7. テキストエディタ側で、余分な</tr><tr>を削除する。
▲このページ一番上へ
● 詳細(式の実際-関数の使い方-)
▲このページ一番上へ
    基本(タグ)     概要(タグ化)     詳細
    半角コード表     記号の名称     表計算入力方法     よく使う関数
    topへ          HTML     CSS     表計算利用     ファイル     色指定     ソフト/機材     参考書など     単位     記号の例
© KinutaHandicraft