BiTT開発
BiTT開発
2015.05.13

HTML5+CSS3でデザインしたtableのCSS&HTMLサンプルソース5点

榊原

JavaScriptを使うtable

均等割り付けを使ったtableっぽくないtable

均等割り付けを使ったtableっぽくないtable

拙筆「均等割り付けで美しい表デザインを実現するjQueryを作ってみました。」で作ったjQueryスクリプトを利用しました。「一昔前にワードで作った感じがいい!」と言われた際にご利用ください。

ソースコードダウンロードはこちら



CSS
/* recruit */
table.recruit {
margin: 0 auto;
border-collapse: collapse;
border: none;
width: 300px;
font-size: 13px;
table-layout: fixed;
}

table.recruit th {
width: 100px;
min-height: 13px;
padding: 10px 10px 10px 0;
text-align: justify;
text-justify: inter-ideograph;
vertical-align: top;
border: none;
white-space: nowrap;
overflow: visible;
}

table.recruit th::after {
float: right;
padding: 0;
right: -15px;
top: 0;
content: "───";
height: 0;
width: 0;
position: relative;
pointer-events: none;
border: none;
}

table.recruit td {
height: 12px;
margin: 0;
padding: 10px 10px 10px 60px;
text-align: left;
vertical-align: top;
border: none;
line-height: 180%;
}
JavaScript
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/justify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".recruit th").justify();
});
</script>
HTML
<!-- recruit -->
<table class="recruit">
<tr>
<th>募集職種</th>
<td>
ディレクター<br />
ライター<br />
ヒトデ
</td>
</tr>
<tr>
<th>業務内容</th>
<td>
ウェブ制作<br />
メディア運用<br />
ブランディングなど
</td>
</tr>
<tr>
<th>勤務地</th>
<td>
上野<br />
</td>
</tr>
</table>

最後に

ぜひぜひこれらをアレンジして使っていただけると嬉しいのですが、重ねて、もっと良い方法があったり、かっこいいのができたりしたら、コメント欄などで教えていただきたいです。

Web屋は日々是勉強ということで、クライアント様のご要望とあれば、自由奔放で泣けてくるようなデザインカンプでも、頑張って実装します!
これからも頑張ります!

最後まで読んでくださってありがとうございました。それでは、また!




【よりよいコーディングライフを】

ウェブデザイナー&コーダーが押さえるべきブックマークレット10選

コーディングに関わる人なら抑えておきたい必須のフロント技術&ツール8選

Web制作者なら押さえておきたい「HTML5」「SEO」「SMO」に関する公式ドキュメントまとめ8選

目指せSassマスター!デザイナーがすぐ実践できる基本テクニック12連発

必読!5分でわかるレスポンシブWebデザインまとめ

Web制作のご相談・料金のお見積りはこちらから