LoginSignup
5
2

More than 5 years have passed since last update.

Qiitaの記事でHTMLを使おう!(テーブルタグの例)

Last updated at Posted at 2017-04-02


マークダウンでなくて、HTMLを書いてもある程度解釈されるみたいですね。このテーブルはマークダウンではありません。最下部のHTMLを(マークダウンの代わりに)貼り付けてあるだけです。衝撃的でしょ?
Name of the feature Example Default
Remove inline styles You should never use inline styles! x
Remove classes and IDs Use classes to style everything. x
Remove all tags This leaves only the plain text.  
Remove successive  s Never use non-breaking spaces       to set margins. x
Remove empty tags Empty tags should go!  
Remove tags with one   This makes no sense! x
Remove span tags Span tags with all styles x
Remove links This is a link.  
Remove tables Takes everything out of the table.  
Replace table tags with structured divs This text is inside a table.  
Remove comments This is only visible in the source editor x
Encode special characters ☺ ★ >< x
Set new lines and text indents Organize the tags in a nice tree view.  
この記事のマークダウン(ていうかHTMLそのもの)
マークダウンでなくて、HTMLを書いてもある程度解釈されるみたいですね。このテーブルはマークダウンではありません。最下部のHTMLを(マークダウンの代わりに)貼り付けてあるだけです。衝撃的でしょ?
<table>
<thead>
<tr>
<td>Name of the feature</td>
<td>Example</td>
<td>Default</td>
</tr>
</thead>
<tbody>
<tr>
<td>Remove inline styles</td>
<td><img src="https://qiita-image-store.s3.amazonaws.com/0/140610/d4184ea0-0c21-3b78-5154-90bae839a05f.png">You <strong style="color: blue; text-decoration: underline;">should never</strong>&nbsp;use inline styles!</td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Remove classes and IDs</td>
<td><span id="demoId">Use classes to <strong class="demoClass">style everything</strong>.</span></td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Remove all tags</td>
<td>This leaves <strong style="color: blue;">only the plain</strong> <em>text</em>.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Remove successive &amp;nbsp;s</td>
<td>Never use non-breaking spaces&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to set margins.</td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Remove empty tags</td>
<td>Empty tags should go!</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Remove tags with one &amp;nbsp;</td>
<td>This makes&nbsp;no sense!</td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Remove span tags</td>
<td>Span tags with <span style="color: green; font-size: 13px;">all styles</span></td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Remove links</td>
<td><a href="https://html-online.com">This is</a> a link.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Remove tables</td>
<td>Takes everything out of the table.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Replace table tags with structured divs</td>
<td>This text is inside a table.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Remove comments</td>
<td>This is only visible in the source editor <!-- HELLO! --></td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Encode special characters</td>
<td><span style="color: red; font-size: 17px;">&hearts;</span> <strong style="font-size: 20px;">☺ ★</strong> &gt;&lt;</td>
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
</tr>
<tr>
<td>Set new lines and text indents</td>
<td>Organize the tags in a nice tree view.</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
😲セーラームーン / ムーンライト伝説 (ユーロビート)ver.
5
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2