裏技カテゴリの記事一覧

テーブルタグを一瞬で

 テーブル(表)タグ。
 面倒くさいですよねぇ。
 本当に私あれを作るのがいやでいやで。
 でも文章サイトやってるからメニューは表を使わにゃ話になりません。

 テーブルタグはこういうのですが

<table>
<tr>
<td>項目</td>
</tr>
</table>

 2行2列に見出し付きなら

<table>
<tr>
<th>メニュー</th>
<th>メニュー</th>
</tr>
<tr>
<td>あ</td>
<td>い</td>
</tr>
<tr>
<td>う</td>
<td>え</td>
</tr>
</table>

 とまあこんな感じに延々とtなんちゃらをくっつけていかねば
 ならんのです。

 ここ表って表示できるのかな?
メニューメニュー

↑こんなしょぼい表。

 しかも空白を作るときには
 rowspanだのcolspanだのつけなきゃいけませんしね。

 そんなわけでうちの目次ページのソースなんて

<TABLE SUMMARY="短編">
<TBODY>
<TR CLASS="BRAN">
<TD CLASS="CEL1"></TD>
<TD CLASS="CEL2"></TD>
<TD CLASS="CEL3"></TD>
<TD CLASS="CEL4"></TD>
<TD CLASS="CEL5" ROWSPAN="6"></TD><!--増えたら変える-->
</TR>

<TR>
<TD COLSPAN="4">++ S H O R T + S T O R Y ++</TD>
</TR>

<TR>
<TD rowspan="4"></TD><!--増えたら変える-->
<TD>
<a href="○○">タイトル</a>
</TD>
<TD COLSPAN="2">
説明
</TD>
</TR>

 ・
 ・
 ・

 みたいなコピペ前提の作りに・・・
 「増えたら変える」って(笑)

 ところがですよ。先日1000や2000では足りないような
 おっそろしいテーブルを作らなくてはならなくなったわけです。
 もちろん↑あんなことやってる時点で明白ですが
 ビルダーなんて高級品持ってません。

 しばらく途方に暮れてデータを眺めていたのですが・・・

 いやあもう私ってば天才とかちょっと思っちゃいました。
 しかし別にそんな大したことじゃないし絶対皆やってる気がするけど。

 一瞬であのめんどうくさいtなんちゃらが付きました!

 使うのは表計算ソフトです〜。エクセルさんです〜。

s-t1.jpg

 これを表にしてアップしたいとします。
 データにピンときた方はお友達になりましょう(笑)

 実はいくらでもスマートな作業にできるのですが
 初心者の方にもわかりやすいように泥臭い作業でいきます。

 まず一番左上のデータの左横のセルに

<tr><td>

 と入力します。
 そしてそのセルの右下をクリックすると
 カーソルの形が+型に変わりますので、そのままの状態で下にドラッグ。

s-t2.jpg

 するとデータの左隣に<tr><td>が入力された行が!
 同様に</td></tr>の行を右隣に作ります。

 次に1行ごとに </td><td> の行を挟んでいくわけですが
 列の挿入に慣れている方は1行作ってぐわっとコピーして
 ボンボン挿入しちゃってください。

 挿入ってどうやるんですかと言う方は混乱するといけないので
 ひとつずつ作っていきましょう。

 まず、1行ずつ空行をさしはさみます。

 空行を入れたい部分の右の行の
 AとかBとか書いてある部分がありますやね。
 そこをクリックすると行全体の色が変わって選択されます。

 その選択された状態でキーボードの
 Ctrl と Shift と 「+」(「;」キーです。ひらがなの「れ」)
 をクリック。
 もしくは右クリックするとメニューが開きますので「挿入」選択。

 そうすると空行が入りますので
 こんな感じに全部の間に空行を挟んでください。

s-t3.jpg

 そうしたらさっきやったように一番上に
 </td><td> 
 と入力し、下にドラッグしてコピーします。

 全部できたらデータを選択して「Ctrl」+「V」
 もしくは編集メニューの「コピー」でコピーします。

 この画像ではデータをドラッグして選択してますが
 量が多ければ全部選択しても全く問題なし。

s-t4.jpg

 そのデータをメモパッドにでも貼り付けまして
 データの上でも左隣でも、とにかく一番最初の<tr>の前に

<table>

 データの最後に

</table>

 をつければテーブル完成!

 ごちゃごちゃ説明しているので面倒くさそうですが
 実際にやってみれば1分かかりません。

 テーブルタグでキーっ!となっているかたはぜひ試してみてね。

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。