各構成要素のデザイン – 「構成要素:表(テーブル)、デザイン:comemo ベーシック、テーマ:Twenty Twelve」編 –

表(テーブル) | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫

記事中の記述
<table width="387" border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<th valign="top" width="148">項目</th>
<th valign="top" width="237">内容</th>
</tr>
<tr>
<td valign="top" width="148">項目1</td>
<td valign="top" width="237">てすてす</td>
</tr>
<tr>
<td valign="top" width="148">項目2</td>
<td valign="top" width="237">てすてす</td>
</tr>
<tr>
<td valign="top" width="148">項目3</td>
<td valign="top" width="237">てすてす</td>
</tr>
<tr>
<td valign="top" width="148">項目4</td>
<td valign="top" width="237">てすてす</td>
</tr>
</tbody>
</table>
CSS スタイルシートエディターに追加する CSS
   /* comemo table basic -twenty twelve 20131218-  */
.entry-content table {
    display: table;
    border-radius: 5px;
    border: 5px solid #cccccc;
}

.entry-content tbody {
    border: 0;
}

.entry-content table tr th {
    background-color: #cccccc;
    color: #ffffff;
    padding: 7px 15px 10px;
    letter-spacing: 15px;
    font-weight: bold;
    text-shadow: -1px -1px 1px #999;
    font-size: 14px;
    border: 0;
    margin: -1px;
}

.entry-content table tr td {
    padding: 10px 15px;
}
以下は Simplenote の表示テストです。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。