You are here
Home > WEB制作 > HTMLでTableを簡単に作成する方法

HTMLでTableを簡単に作成する方法

html code 画像

毎日暑いですね。めっきり外出が減り、エアコンの毎日です。

今回は、私がちょっと苦手な「HTMLのTable作成」の際に使用しているツールをご紹介します。
これを使うと、テーブルの結合・解除をまるで「EXCELのセル」の様に扱うことができます

SPONSERD LINK

Table Tag Generator

まず、普段お世話になっている「Table Tag Generator」をご紹介。
HTMLの表を簡単に作成することが出来ます。また、複雑な表の結合や文字の入力も簡単に出来ます。

Table Tag Generator 画像1

Table Tag Generatorの使い方

行の追加・削除方法

「行(縦)」にある数字の「▲」「▼」をクリック、または数字を直接入力すると、リアルタイムで下の表示テーブルが変更されます。

Table Tag Generator 画像2

テーブル列の追加・削除方法

「列(横)」にある数字の「▲」「▼」をクリック、または数字を直接入力すると、リアルタイムで下の表示テーブルが変更されます。

Table Tag Generator 画像3

テーブルセルの結合方法

結合したい部分をドラッグ(ドラッグした部分が赤く表示されるのでわかりやすい)し、「結合」ボタンをクリックします。

Table Tag Generator 画像4

結合後の画面がこちら。

Table Tag Generator 画像5

無事セルが結合され、ソースも正確に表示されていることが分かります。

Table Tag Generator 画像6

テーブル(結合セル)の分割方法

誤って結合したセルを分割したい場合や、結合セルを分割する場合は下記の方法で行います。

①「結合しているセル」をドラッグ(なぞる様な感じで)します。

Table Tag Generator 画像7

②「範囲を選択」した後、「分割」ボタンをクリックします。

Table Tag Generator 画像8

結合したセルが分割されました。

Table Tag Generator 画像9

まとめ

Table Tag Generator」、いかがでしたでしょうか。

私のように、「テーブルの結合・分割」が苦手な人はぜひ「Table Tag Generator」を利用してみて下さい。
作業効率がきっと良くなると思います。

  • 「結合」はセルをドラッグして範囲指定した後、「結合」ボタンをクリック
  • 「分割」は結合セルをドラッグして範囲指定した後、「分割」ボタンをクリック
  • 範囲指定した後「td-th」ボタンをクリックすると「th(テーブルヘッダー)」に変更可能
  • 独自の「class」を指定することも可能
0
Pocket

SPONSERD LINK

コメントを残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Top