CSV データ から HTML の 表・テーブルを作成

自分用めも




■「Dafizilla Table2Clipboard」で CSVデータ化
(不要部分を Nuke Anything Enhanced で削除してから)


  tbed01s.png

□ 設定(区切り文字をカンマに設定)

  gjghdj0s.png

  
サクラエディタで編集(不要部分の削除・置換・並べ替え)
・矩形選択:[Alt]キーを押しながらマウスドラッグ
・選択行の昇順ソート:[Alt+A]    ・選択行の降順ソート:[Alt+D]


  tbed02s.png


■「Cassava Editor」(CSV編集エディタ)で編集(列・行の追加 ほか)

  tbed03s.png


■「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」で HTML化(↓ 設定)

  tbed04s.png




■ HTMLひな形

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>○○○○○</title>

<style type="text/css">
<!--

/* */

-->
</style>

</head>

<body>
<div align="center" style="margin: 0px 0px 0px 0px;"> <!-- left:左端揃え -->
<table>

<!-- -->

</table>
</div>
</body>

</html>




■ CSS で装飾

□ 基本デザイン
  
  tbcss01.png
  
/* 印刷用(デフォルトで8pxあるので) */
body { margin: 0px 0px 0px 0px; }

table {
border-collapse: collapse;
empty-cells: show;
font-family: "MS Pゴシック" ;
}

td {
padding: 1px 3px 1px 3px;
border: solid 1px #AAAAAA;
background-color: #FFFFFF;
text-align: center;
vertical-align: middle;
color: #000000;
}

□ 縦列の属性をまとめて指定 [CSS] :nth-child(n) :nth-of-type(n)
  
  tbcss02.png
  
/* 縦ライン */
tr td:nth-child(12),
tr td:nth-child(7),
tr td:nth-child(2) {
border-right-color: #FF0000;
border-right-width: 2px;
}

/* 特定列のボーダー ・背景・幅 */
tr td:nth-child(2) {
border-bottom-color: #0000FF;
background-color: #FFFF00;
width: 100px;
}

※ nの部分には、奇数を表すodd・偶数を表すeven・数式を指定できます。
数式で奇数を指定するには2n+1、偶数を指定するには2n+0となります。


□ 最上・最下 行の属性を指定
・tr:first-child ・td tr:last-child td
・tr:first-of-type ・td tr:last-of-type td

  
  tbcss03.png
  
/* 一行目 */
tr.nrow0 td {
border: solid 2px #000000;
color: #000000;
background-color: #EBEBEB;
}

/* 最下行 */
tr:last-child td {

}

/* 最下行 上ボーダー *//* 上行の下ボーダーで上書きされるので */
tr:nth-last-of-type(2) td { border-bottom-color: #000000; }


□ 偶数行の属性を指定 :nth-child(n) :nth-of-type(n)
※ nの部分には、奇数を表すodd・偶数を表すeven・数式を指定できます。
数式で奇数を指定するには2n+1、偶数を指定するには2n+0となります。

  
  fdyjs.png
  
/* 列 */
tr td:nth-child(2n+0) { background-color: #FFFF00; }

/* 行 */
tr:nth-child(2n+0) td { background-color: #9DFFFF; }

□ 外枠ボーダー
  
  tbcss04.png
  
/* 外枠ボーダー */
table { border: solid 2px #FF0000; }

□ 特定セルの属性を指定:tr.nrow1(特定行) td:nth-child(n)  :nth-of-type(n)
  
  tbcss05.png
  
tr.nrow3 td:nth-child(n+3),
tr.nrow2 td:nth-child(n+3) {
border-bottom-color: #FF0000;
border-bottom-width: 3px;
}

tr.nrow3 td:nth-child(n+13),
tr.nrow2 td:nth-child(n+13) {
border-bottom-color: #AAAAAA;
border-bottom-width: 1px;
}


outline を使ってみるアウトラインとボーダー の違い - Google 検索)
  
  jgft.png
  
tr.nrow3 td:nth-child(13),
tr.nrow3 td:nth-child(2) {
outline: solid 2px #0000ff;
outline-offset: 1px; /* 無効 */
}





■ ブログ用 HTMLひな形(他のテーブルに影響しない様 <div> に適当なクラス名をつける)

<br>

<style type="text/css">
<!--
/* */
.numtb table {
border-collapse: collapse;
empty-cells: show;
font-family: "MS Pゴシック" ;
}

.numtb td {
padding: 1px 3px 1px 3px;
border: solid 1px #AAAAAA;
background-color: #FFFFFF;
text-align: center;
vertical-align: middle;
color: #000000;
}
-->
</style>
<br>

<div class="numtb" align=" left" style="margin: 0px 0px 0px 0px;">
<table>

<!-- -->

</table>
</div>





■「KompoZer」で装飾

  kom01s.png

□ 赤枠部分をクリックすると 列・行を一度に選択できます。

  kom02s.png

□ 文字色の変更

  kom03s.png

□ 背景色の変更

  kom04s.png

□ ダイアログ

  kom05e.png

※ プロパティからは一度に変更できないみたいです。

□ 文字・色背景色を変更

  kom06s.png

□ スタイルはインラインで埋め込まれます。

  kom07s.png

□ 赤線部分をドラッグすることで 幅・高さを変えられます。

  kom08s.png

□ テーブルのプロパティ

  kom09s.png

□ セルのプロパティ

  kom10s.png

□ [Ctrl]キーを押しながらクリックすると複数のセルを選択できます。(再クリックで解除)

  kom11s.png

□ 複数セルの文字色・背景色を一度に設定できます。

  kom12s.png

□ スタイルはインラインで埋め込まれます。

  kom13s.png

□ スタイル部分を クラス名に置換

  gffds.png




関連記事
プロフィール

Author:zubolla
  
あ~
めんどくちゃい めんどくちゃい

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム