htmlでtableの文字を縦書きにする2つの方法

公開日: : 最終更新日:2014/09/16 インターネット

テーブルの中で文字を縦書きにしたいことってあるじゃないですか。
たとえば、紙媒体を再現したいときです。
できるだけスマートに表現するならやっぱりCSSを使うことでしょうね。

CSSで縦書き設定

htmlでtableの文字を縦書き CSSで設定
tdの中でspanでスタイルシートを縦書きに設定すればいいです。
<td><span Style=”writing-mode:tb-rl;”>効果C<br>※追加文字</span></td>

テーブルの幅をフォント1文字サイズに設定

テーブルの幅をフォント1文字サイズに設定

他にもtdのサイズを狭く設定するという方法もあります。
問題点として、縦書きに二行追加すると行が崩れる。
かといって一文字一文字にBRの変換を入れるのはダサい。
(効<br>果<br>C<br><br>※<br>追<br>加<br>文<br>字)

<td width=”12″>効果C<br>※追加文字</td>

私のオススメはspanでcssを使って縦書き設定することですね。
スマートです。
思いつきで書いたので、自分でやりやすい方法を選択していただければと思いますね。

関連記事

自動更新型アフィリエイトサイト作成エンジン楽天版の文字化けを修正

文字化け修正した自動更新型アフィリエイトサイト作成エンジン楽天版

自動更新型 大・中規模アフィリエイトサイト作成エンジン(楽天版)と

メントスコーラ時限爆弾の作り方

メントスコーラ起爆装置の作り方

はじめ社長などのユーチューバーの動画を見ていると、みんなやってるコーラ

無料サーバーの弱点

無料サーバーの弱点

そもそもマネタイズとは、ネット上の無料のサービスを使って収益を上げる方

no image

自分のホームページ作るときの種類と選び方

ある個人商店の方がホームページを作るというのでアドバイスをする内容を考

UAC

VISTAで画面暗転エラー画面+警告表示を消す方法

VISTA対応でないソフトを起動すると画面が暗転しエラー画面がでる

サイド自由欄の設定方法(楽天ブログ

サイド自由欄の設定方法(楽天ブログ

ちょっと悩んだので一応メモ。 サイド自由欄の設定方法は、

月10万PV達成しました

ブログ飯したい月3万円ブロガーが月5万円に挑戦中

私のブログは副サイトあわせて、1日UV3000ビューを超え月3万円にな

Message

メールアドレスが公開されることはありません。

no image
光回線からルーターのWANに繋いでUNIが光らないは初期不良です

ビッグローブ光なら【ビッグローブ光.net】 に契約し

no image
0歳の子供と一緒に寝ると腰痛い昼間眠い理由

0歳の子どもと同じフィールドで寝ています。 (親子同じ

子供のを乗せたまま上りエスカレーターに乗る
ベビーカーのまま上りと下りエスカレーターに乗る方法

ショッピングモールでは危ないのでベビーカーに子供を乗せた

自分が道路の中央より30センチ右に座っているをイメージ
車で道路の真ん中を走る方法

いろいろ情報がありますが、私が書く車で道路の真ん中を走る

no image
節約とケチ(貧乏で悲惨)の違い

大阪のケチなおばはんの本、カンサイ式節約術をちょとだけ読

→もっと見る

  • いいだしっぺ(これでいいだ)
    ブログのもくじ 私のプロフィール
    現代の幸福論に挑戦しています。
    ウクレレブログ好き。

PAGE TOP ↑