HOME ＞ 必見！CSS道場 ＞ テーブル

スタイルシートサンプル集

CSS　見出し編 CSS　テーブル編 CSS　リスト編

必見！CSS道場

スタイルシートレイアウトに代わったからといっても会社概要などまだまだテーブルが必要な場合もあります。
サンプルではwidth="××"が指定されていますが、実際にお使いになるときはご自身の環境にあった幅を指定してください。

new 見やすいテーブルデザイン（04）　08/07/01

htmlソース


	

    	日付
        内容
    

    

    	7/1
        内容がここにはいります。
    

    

    	7/2
        内容がここにはいります。
    

    

    	7/3
        内容がここにはいります。
    

    

    	7/4
        内容がここにはいります。

スタイルシートソース

.table04 {
	border-collapse: collapse;
}

.table04 th {
	border: 1px solid #CCC;
	padding: 3px;
	background: #56B921;
	color: #FFF;
}

.table04 td {
	border: 1px solid #CCC;
	padding: 3px;
}

.table04 .bg01 td {
	background: #EBFFE1;
}

シンプルなテーブルデザイン（03）　08/05/16

htmlソース


    
        

            タイトル
            内容がここにはいります。
        

        

            タイトル
            内容がここにはいります。
        

        

            タイトル
            内容がここにはいります。
        

        

            タイトル
            内容がここにはいります。

スタイルシートソース

.table03 th,
.table03 td {
    border-bottom: 1px dotted #CCC;
    padding: 3px;
}

.table03 th {
    text-align: left;
}

シンプルなテーブルデザイン（02）　08/04/01

htmlソース


    
        

            タイトル
            内容がここにはいります。
        

        

            タイトル
            内容がここにはいります。
        

        

            タイトル
            内容がここにはいります。
        

        

            タイトル
            内容がここにはいります。

スタイルシートソース

.table02 {
	border: 1px solid #666;
}

.table02 th {
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	background: #DFE3E6;
	padding: 3px;
}

.table02 td {
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	background: #F3F3F3;
	padding: 3px;
}

シンプルなテーブルデザイン（01）　08/03/24

htmlソース


    
        

            タイトル
            内容がここにはいります。
        

        

            タイトル
            内容がここにはいります。
        

        

            タイトル
            内容がここにはいります。
        

        

            タイトル
            内容がここにはいります。

スタイルシートソース

.table01 {
	border-collapse: collapse;
}

.table01 th,
.table01 td {
    border: 1px solid #CCC;
    padding: 3px;
}

.table01 th {
    text-align: left;
    background: #E1E1E1;
    font-weight: 400;
}

このページのTOPへ

スタイルシートサンプル集

CSS　見出し編 CSS　テーブル編 CSS　リスト編

このページのTOPへ