記事の詳細

こんにちは。

火曜日です。

田中のブログ当番です。

M氏から「このブログは企業のブログなので、個人ブログ感が強いからもう少しフォーマルに書いた方がいいな~。」と言われたのですが…

「はーい」といいつつ断固拒否で貫いています♪内緒です♪( *´艸`)

今日のブログのテーマは…

 

「HTMLでのテーブル作成を”Excel” が救う!!」

 

HTMLでのテーブル作成ですが、テーブルの作成中、<td>タグが多すぎて、「めんどくさい」とか「あ~どこまで作ったかわからなくなった!!」という方にはいいと思います。

行が3つとか列が3つとか、数が少ない分は別に全然余裕なんですが、7つ以上とか…

まぁだるいですね。

 

これが楽に作れる方法を今回はお伝えします。

これは代表から教えてもらった方法ですが、自分が発見したかのように振る舞います。

これも内緒です…( *´艸`)

 

使うツールはみんなもご存知のExcelです。

Wordよりもこっちの方が使いやすいっていう方は多いのではないのでしょうか。

まぁ、自分もその一人ですがwww

 

Excelというだけに、ただ表を作り計算するだけではなく、とても賢いです!!

 

まずは、Excelで表を作る

例ですが、下記のようなデータを準備しました。
これを簡単にHTMLのテーブルのコードにしていきます。
Excel テーブル_01

矢印※テーブルに必要なタグ<table>は置いといて、その他に必要な<tr>と<td>で先に作ります。

Excel テーブル_02

※「”」で囲わないと<>が数式として認識してしまって警告が出ます

矢印

Excel テーブル_03

矢印

Excel テーブル_04

矢印

Excel テーブル_05

 

矢印

Excel テーブル_06

矢印

Excel テーブル_07

 

 

ドラッグで簡単コピー

 

 

Excel テーブル_08

矢印

Excel テーブル_09

矢印

Excel テーブル_10

それでは実際にHTMLに反映

Excel テーブル_11

矢印

ここからはエディター作業です( `ー´)ノ

Excel テーブル_12

矢印

Excel テーブル_17

矢印

プレビューで見るとこうなります。Excel テーブル_14

いかがでしょうか。

一応ヘッダーの項目も追加してみました。

これでよりテーブルになりましたね。あとは罫線を調整すれば終わりです。

Excel テーブル_15

この方法は項目が多ければ多いほど効果的です( `ー´)ノ

是非活用して頂けると幸いです。
tanaka_english_lesson

<<英語講座>>Passion

タイトルでわかる通り、パッションですね。
英語で使った記憶は自分にはなかったのですが、サンジョリ先生と話す時は結構よく使います。

このPassionですが、Google先生で翻訳すると…情熱とか熱心とか…熱いものを感じますね。

一見使わなそうに思われますけれど、「作品に魂を込める」とか「強い想い」とかで結構使うようです。

soul や spiritと直訳しそうですが、passion 一つで伝わりそうですよ。( `ー´)ノ

Thank you for reading my blog.

See you next time.

Have a nice day.

【PR】相模原市産業会館パソコン教室

相模原市産業会館パソコン教室では「アットホーム」な雰囲気でパソコンを楽しく分かるまで学ぶことができます。

bana-pasoken-blog

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る