表
欧文特殊文字の表： 文字実体参照（Character Entity Reference）で入力する場合
表のフォーマットの具体例については，本HTMLソースを御覧ください。
HTMLソース内の「入力」カラム（列）箇所では pre要素（PREformatted text: 整形済みテキスト）を使っていますが，その中で & 記号だけは「文字実態参照」表記となっていることに注意してください。& 文字はHTMLの中で特別な意味を持って用いられるため，この文字をいわば「エスケープ」する必要があるのです。
| 入力 | 出力 | 入力 | 出力 | 入力 | 出力 | 入力 | 出力 |
|---|---|---|---|---|---|---|---|
» | » | « | « | ä | ä | Ä | Ä |
„ | „ | “ | “ | á | á | Á | Á |
“ | “ | ” | ” | à | à | À | À |
ß | ß | ç | ç | â | â | Â | Â |
ã | ã | ð | ð | þ | þ | å | å |
æ | æ | ø | ø | € | € | £ | £ |
欧文特殊文字の表： 数値文字参照（Numeric Character Reference）で入力する場合
先の表と異なり，今度の表は「中央寄せ」となっており，「キャプション」出力も異なっていることに注意しましょう。どのようにしてこれを実現しているのか，HTMLソースを御覧ください。あわせて，複数行「ぶち抜き」で作表する方法と，そこの文字列を縦書きにする方法も御確認ください。
| 入力 | 出力 | 上表と同じ文字や符号が | 入力 | 出力 | 数値文字参照表記による | 入力 | 出力 | 入力でも同様に出力可能 | 入力 | 出力 |
|---|---|---|---|---|---|---|---|---|---|---|
» | » | « | « | ä | ä | Ä | Ä | |||
„ | „ | “ | “ | á | á | Á | Á | |||
“ | “ | ” | ” | à | à | À | À | |||
ß | ß | ç | ç | â | â | Â | Â | |||
ã | ã | ð | ð | þ | þ | å | å | |||
æ | æ | ø | ø | € | € | £ | £ |
『子供と家庭のメルヒェン集』独・日・仏・英タイトル
ここでは :lang() 疑似クラス，隣接セレクタ，:nth-child()疑似クラス といった手法を用いて「言語ごとに色を異ならせる作表デザイン」のロジックを組んでいます。
「KHM番号カラム」の数字は「右寄せ」となっていること（そしてどうやってこれを実現しているのか）にも注意してください。
表のキャプション部には ::before疑似要素 を使ってそれぞれの言語に対応するユニコードの「国旗 Emoji」を冠しましたが，クライアント（閲覧者）のデバイスによっては期待する表示とならない場合もあります。
| KHM | Deutsch |
|---|---|
| 1 | Der Froschkönig oder der eiserne Heinrich |
| 5 | Der Wolf und die sieben jungen Geißlein |
| 12 | Rapunzel |
| 15 | Hänsel und Gretel |
| 21 | Aschenputtel |
| 26 | Rotkäppchen |
| 27 | Die Bremer Stadtmusikanten |
| 50 | Dornröschen |
| 53 | Sneewittchen |
| 55 | Rumpelstilzchen |
| KHM | 日本語 |
|---|---|
| 1 | カエルの王様または鉄のハインリヒ |
| 5 | オオカミと7匹の子ヤギ |
| 12 | ラプンツェル |
| 15 | ヘンゼルとグレーテル |
| 21 | 灰かぶり |
| 26 | 赤ずきん |
| 27 | ブレーメンの音楽隊 |
| 50 | いばら姫 |
| 53 | 白雪姫 |
| 55 | ルンペルシュティルツヒェン |
| KHM | Français |
|---|---|
| 1 | Le Roi-Grenouille ou Henri-le-Ferré |
| 5 | Le Loup et les Sept Chevreaux |
| 12 | Raiponce |
| 15 | Jeannot et Margot |
| 21 | Cendrillon |
| 26 | Le Petit Chaperon rouge |
| 27 | Les Musiciens de la fanfare de Brême |
| 50 | La Belle au Bois Dormant |
| 53 | Blanche-Neige |
| 55 | Outroupistache |
| KHM | English |
|---|---|
| 1 | The Frog King, or Iron Heinrich |
| 5 | The Wolf and the Seven Young Kids |
| 12 | Rapunzel |
| 15 | Hansel and Grethel |
| 21 | Cinderella |
| 26 | Little Red Cap |
| 27 | The Bremen Town Musicians |
| 50 | Little Briar-Rose |
| 53 | Little Snow White |
| 55 | Rumpelstiltskin |
リスト
番号付き
HTML ソースの当該箇所で decimal とあるところを decimal-leading-zero, upper-roman, lower-latin, lower-greek, hiragana, hiragana-iroha, katakana, cjk-ideographic に変えてみましょう。出力はどうなりますか？
- Emacs
- TeX
- HTML
- CSS
- JavaScript
次は CSS を使って視覚的デザインを施した番号付きリストです。ここでは「1からではなく6から」番号を振らせています。詳しくは HTML/CSS ソースを御覧ください。
- Emacs
- TeX
- HTML
- CSS
- JavaScript
番号なし
HTML ソースの当該箇所で disc とあるところを circle, square, none に変えてみましょう。出力はどうなりますか？
- Emacs
- TeX
- HTML
- CSS
- JavaScript
次は CSS を使って視覚的デザインを施した番号なしリスト です。詳しくは HTML/CSS ソースを御覧ください。
- Emacs
- TeX
- HTML
- CSS
- JavaScript