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




関連記事

なんか、最近「味の素 ギョーザ」の皮 硬すぎ

なんか、最近「味の素 ギョーザ」の皮 硬すぎです。
これって 宅配用だけ?
  
皮が硬いので 水をたして長めの調理をするも…
ほとんど変わりなし

ほかのギョーザのレベルが低すぎるので
結局、これ買うことになりますが
これからも変わらないんだったら
やめるかも…


追記:市販のやつ買って食べたらフツーでした…
追記:やっぱ宅配用だから硬かったのか?






関連記事

ナンバーズ 出目表 の印刷(必要のない行を削除して印刷)

ナンバーズ 出目表 の印刷

必要のない行をカットして印刷





Nuke Anything Enhanced」を使う方法

  
■ 印刷用ページを開き

■ 必要のない行を [Ctrl] キーを押しながらマウスドラッグで選択します。

  edpt01s.png

■「Nuke Anything Enhanced」を使い「Remove selction」で削除します。

  edpt02s.png

■ ゴミが残る場合、それも選択・削除します。

  edpt03s.png

  edpt04s.png

■ 必要のない行を削除できました。

  edpt05s.png

■ 印刷プレビューで確認し、設定で調整後、印刷します。




■ 用紙いっぱいに印刷したい場合は PDFファイル化してからトリミング印刷します。




Page Hacker」を使う方法

※ IE の場合は 編集用ブックマークレット で可能です。

  
■「Page Hacker」を 有効 にしてから 行をマウスドラッグで選択します。

  edpt10ss.png

■ ↓の [×] 部分をクリックすると…

  edpt11s.png
■ 削除できます。

  edpt13s.png




■ 列幅を広げるには

  edpt14s.png

■ 赤丸部分をドラッグすれば変えることができます。

  edpt15s.png


  edpt16s.png




■ 列の削除 ⇒ [×] 部分をクリック

  edpt20s.png


  edpt21s.png




■ 右クリックメニュー ⇒ 削除では・・・

  edpt23s.png

■ 文字が消えるだけです。

  edpt24s.png




■ 列の追加 ⇒ [▽] をクリック

  edpt25s.png


  edpt26ss.png




■ 文字入力可

  edpt27ss.png




関連記事

WIN5配当計算機 を見やすく(?)するスタイル

WIN5配当計算機 を見やすく(?)するスタイル





■ スタイル適用前

  win5m01s.png

■ スタイル適用後

  win5m02s.png

■ 見やすく(?)するスタイル( ⇒ 使い方
数値を適当に調整してください

@-moz-document url("http://yunmao.net/win5/") {

tr td {
padding: 2px 1px 1px 1px !important;
}

tr td.br0 {
/* font-weight: bold !important; */
padding: 2px 1px 4px 1px !important;
border-bottom: solid 1px #7E7E7E !important;
}

/* 馬番 */
.brl {
border-right-width: 1px !important;
padding-right: 2px !important;
}

/* オッズ */
.brc {
border-right-width: 1px !important;
border-right-color: #CECECE !important;
}

/* 背景色 */
/* .brc[nowrap=""], *//* 馬名の背景を消す */
.brc[align="right"],/* オッズ */
.brr {
background-color: #FFFFFF !important;
}

/* 馬名 */
.brc.br18[nowrap=""],
.brc.br17[nowrap=""],
.brc.br16[nowrap=""],
.brc.br15[nowrap=""],
.brc.br14[nowrap=""],
.brc.br13[nowrap=""],
.brc.br12[nowrap=""],
.brc.br10[nowrap=""],
.brc.br9[nowrap=""],
.brc.br8[nowrap=""],
.brc.br7[nowrap=""],
.brc.br6[nowrap=""],
.brc.br5[nowrap=""],
.brc.br4[nowrap=""],
.brc.br3[nowrap=""],
.brc.br2[nowrap=""],
.brc.br1[nowrap=""] {
border-right-width: 1px !important;
padding-left: 4px !important;
padding-right: 2px !important;
font-size: 16px !important;/* 適当な値に調整 */
color: #000000 !important;
}

.brr {
padding-left: 1px !important;
padding-right: 2px !important;
}

/* ボーダー色 *//* 適当な値に調整 */
tr + tr td { border-color: #7E7E7E !important; }

table {
border-collapse: collapse !important;
padding: 20px 0px 0px 0px !important;
}

body { margin: 2px 0px 0px 0px !important; }

h1 ~ table tr + tr,
#form_id a { display:none !important; }

h1[align="center"] {
margin-bottom: 0px !important;
font-size: 20px !important;
}

h1 ~ table tr td a { font-size: 15px !important; }

tr td font,
tr td br,
h1 ~ br { display:none !important; }

form#form_id { padding: 8px 0px 0px 0px !important; }

tr:nth-last-of-type(1) {
position: relative !important;
top: -25px !important;
left: 428px !important;
}

tr td textarea {
font-size: 15px !important;
position: absolute !important;
top: 0px !important;
left: 0px !important;
width: 300px !important;
height: 220px !important;
}

tr td #tensu {
font-size: 16px !important;
position: absolute !important;
top: 2px !important;
left: -202px !important;
}

tr td input[type="button"] {
position: relative !important;
left: 348px !important;
}

}





関連記事

WIN5配当計算機 の印刷用スタイル

WIN5配当計算機 の印刷用スタイル





■ スタイルA( ⇒ 使い方

  win5p01s.png

適当に数値調整してください

@-moz-document url("http://yunmao.net/win5/") {

tr td.br0 {
/* font-weight: bold !important; */
padding: 2px 1px 4px 1px !important;
border-bottom: solid 1px #606060 !important;
}

/* チェックボックス */
td input { visibility:hidden !important; }

/* 馬番 */
.brl {
border-right-width: 1px !important;
padding-right: 2px !important;
}

/* オッズ */
.brc {
border-right-width: 1px !important;
}

/* 背景色 */
/* .brc[nowrap=""], *//* 馬名の背景を消す */
.brc[align="right"],/* オッズ */
.brr {
background-color: #FFFFFF !important;
}

/* 馬名 */
.brc.br18[nowrap=""],
.brc.br17[nowrap=""],
.brc.br16[nowrap=""],
.brc.br15[nowrap=""],
.brc.br14[nowrap=""],
.brc.br13[nowrap=""],
.brc.br12[nowrap=""],
.brc.br10[nowrap=""],
.brc.br9[nowrap=""],
.brc.br8[nowrap=""],
.brc.br7[nowrap=""],
.brc.br6[nowrap=""],
.brc.br5[nowrap=""],
.brc.br4[nowrap=""],
.brc.br3[nowrap=""],
.brc.br2[nowrap=""],
.brc.br1[nowrap=""] {
border-right-width: 1px !important;
padding-left: 4px !important;
padding-right: 2px !important;
font-size: 17px !important;/* 適当な値に調整 */
}

/* ボーダー色 *//* 適当な値に調整 */
tr + tr td { border-color: #606060 !important; }

table {
border-collapse: collapse !important;
padding: 20px 0px 0px 0px !important;
}

/* 上スペース *//* 適当な値に調整 */
form#form_id {
padding: 100px 0px 0px 0px !important;
}

body { margin: 0px 0px 0px 0px !important; }/* 適当な値に調整 */

/* 消す */
h1,
h1 ~ table,
#form_id a,
td[colspan="15"] { display:none !important; }

}



■ スタイルB( ⇒ 使い方

  win5p02s.png

適当に数値調整してください

@-moz-document url("http://yunmao.net/win5/") {

tr td.br0 {
/* font-weight: bold !important; */
padding: 2px 1px 4px 1px !important;
border-bottom: solid 1px #606060 !important;
}

/* チェックボックス */
td input { visibility:hidden !important; }

/* 馬番 */
.brl {
border-right-width: 1px !important;
padding-right: 2px !important;
}

/* オッズ */
.brc {
border-right-width: 1px !important;
}

/* 背景色 */
/* .brc[nowrap=""], *//* 馬名の背景を消す */
.brc[align="right"],/* オッズ */
.brr {
background-color: #FFFFFF !important;
}

/* 馬名 */
.brc.br18[nowrap=""],
.brc.br17[nowrap=""],
.brc.br16[nowrap=""],
.brc.br15[nowrap=""],
.brc.br14[nowrap=""],
.brc.br13[nowrap=""],
.brc.br12[nowrap=""],
.brc.br10[nowrap=""],
.brc.br9[nowrap=""],
.brc.br8[nowrap=""],
.brc.br7[nowrap=""],
.brc.br6[nowrap=""],
.brc.br5[nowrap=""],
.brc.br4[nowrap=""],
.brc.br3[nowrap=""],
.brc.br2[nowrap=""],
.brc.br1[nowrap=""] {
border-right-width: 1px !important;
padding-left: 4px !important;
padding-right: 2px !important;
font-size: 17px !important;/* 適当な値に調整 */
}

/* ボーダー色 *//* 適当な値に調整 */
tr + tr td { border-color: #606060 !important; }
.brl { border-left-color: #FFFFFF !important; }
.brr {
border-right-color: #FFFFFF !important;
border-right-width: 3px !important;
}

table {
border-collapse: collapse !important;
padding: 20px 0px 0px 0px !important;
}

/* 上スペース *//* 適当な値に調整 */
form#form_id {
padding: 100px 0px 0px 0px !important;
}

body { margin: 0px 0px 0px 0px !important; }/* 適当な値に調整 */

/* 消す */
h1,
h1 ~ table,
#form_id a,
td[colspan="15"] { display:none !important; }

}




■ Firefox 印刷設定

  win5p04s.png

  win5p03s.png




■ 自分用

  win5p03s_201506021426476f4.png

@-moz-document url("http://yunmao.net/win5/") {

td.br0 {
text-align: left;
background-color: #FFFFFF !important;
padding: 2px 1px 6px 22px !important;
border-bottom: solid 1px #606060 !important;
font-size: 17px !important;
}

/* チェックボックス */
td input { visibility:hidden !important; }

/* 馬番 */
.brl {
border-right-width: 1px !important;
padding-right: 2px !important;
}

/* オッズ */
.brc[align="right"] {
border-right-width: 1px !important;
color: #5A5A5A !important;
}

/* 背景色 */
.brc[nowrap=""],/* 馬名の背景を消す */
.brc[align="right"],/* オッズ */
.brr {
background-color: #FFFFFF !important;
}

/* 馬名 */
.brc.br18[nowrap=""],
.brc.br17[nowrap=""],
.brc.br16[nowrap=""],
.brc.br15[nowrap=""],
.brc.br14[nowrap=""],
.brc.br13[nowrap=""],
.brc.br12[nowrap=""],
.brc.br10[nowrap=""],
.brc.br9[nowrap=""],
.brc.br8[nowrap=""],
.brc.br7[nowrap=""],
.brc.br6[nowrap=""],
.brc.br5[nowrap=""],
.brc.br4[nowrap=""],
.brc.br3[nowrap=""],
.brc.br2[nowrap=""],
.brc.br1[nowrap=""] {
border-right-width: 1px !important;
padding-left: 4px !important;
padding-right: 2px !important;
font-size: 17px !important;/* 適当な値に調整 */
border-right-color: #AEAEAE !important;
}

/* ボーダー色 *//* 適当な値に調整 */
tr + tr td { border-color: #606060 !important; }
.brl { border-left-color: #FFFFFF !important; }
.brc { border-right-color: #AEAEAE !important; }
.brr {
border-right-color: #FFFFFF !important;
border-right-width: 3px !important;
}

table {
border-collapse: collapse !important;
padding: 20px 0px 0px 0px !important;
}

/* 上スペース *//* 適当な値に調整 */
form#form_id {
padding: 100px 0px 0px 0px !important;
}

body { margin: 0px 0px 0px 0px !important; }

/* 消す */
h1,
h1 ~ table,
#form_id a,
td[colspan="15"] { display:none !important; }

/* 10頭 */
tr:nth-child(11) td.brr,
tr:nth-child(11) td.brc,
tr:nth-child(11) td.brl {
border-bottom-width: 3px !important;
border-bottom-color: #000000 !important;
}

}






関連記事
プロフィール

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

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム