CSS HTML 初心者 勉強中。

CSS HTML 初心者です。備忘録的メモです。

   当サイトはアフィリエイト広告を利用しています

HTMLで表をつくりたい。いろいろなパターン編。リンク一覧 応用編。

 表を作りたい。第3弾。

完全に自分が使いたいためだけ…(*´Д`)

 

基本の記事はこちら

HTMLで表をつくりたい。table を作ってみる。

HTMLで表をつくりたい。いろいろなパターン編。

以前アップした記事です。

 

今回はリンクに飛べるようにしたものをよく使うので、

雛形をおいておきたいなっていう。。 オシャレ度ゼロです。すみません。

 

今回作りたい雛形

要は、上のを、こんな感じにしたいっていう。それだけです。(*´з`)  

HTMLで表をつくりたい。 その1.table を作ってみる。  
HTMLで表をつくりたい。 その2.いろいろなパターン編。  

 

アイコンは Font Awesome のものを使っています。

このアイコンを使う場合は、少しだけ設定が必要です。

便利なフリーアイコン: Font Awesome を導入。

 

上のはこうなってます。 

<table border="1">
<tbody>
<tr>
<td width="30%">HTMLで表をつくりたい。</td>
<td>その1.table を作ってみる。</td>
<td><a href="https://mikanusagi.hatenablog.com/entry/2018/05/20/045748"><i class="fas fa-external-link-alt">&nbsp;</i></a></td>
</tr>
<tr>
<td width="30%">HTMLで表をつくりたい。</td>
<td>その2.いろいろなパターン編。</td>
<td><a href="https://mikanusagi.hatenablog.com/entry/2018/11/13/030257"><i class="fas fa-external-link-alt">&nbsp;</i></a></td>
</tr>
</tbody>
</table> 

 

雛形

見出し1 タイトル1  
見出し1 タイトル2  

というわけでこのタイプの雛形は下記の通り。

赤字の部分を適当に変更して使います。 

★列の幅や数の調整の仕方は、上記の「表を作りたいシリーズ」からどうぞ。

<table border="1">
<tbody>
<tr>
 <td width="30%">見出し1</td>
 <td>タイトル1</td>
 <td><a href="URL"><i class="fas fa-external-link-alt">&nbsp;</i></a></td>
</tr>
<tr>
 <td width="30%">見出し1</td>
 <td>タイトル2</td>
 <td><a href="URL"><i class="fas fa-external-link-alt">&nbsp;</i></a></td>
</tr>
</tbody>
</table>

 

 

 

では、今回はこのへんで。(*'▽')/