HTMLシリーズ(8): table_html/css_WEB-ITnose
1. 基本テーブル:
表マーク
| 基本構文:
<table> <tr> <td>单元格内文字</td> <td>单元格内文字</td> ...... </tr> <tr> <td>单元格内文字</td> <td>单元格内文字</td> ...... </tr> ......</table> ログイン後にコピー サンプルコード:
りー
2. 表をでこぼこにしないようにします スタイルを使用しないと、表の境界線がでこぼこになります。セルスペースとセルパディングを使用して、でこぼこ感をキャンセルできます。 cellpacing は td と td の間の距離、cellpadding はセルの内部コンテンツとセル境界の間の空白距離のサイズです。 例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>第9章</title> 6 </head> 7 <style type="text/css"> 8 body { 9 font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 10 color: #4f6b72; 11 background: #E6EAE9; 12 } 13 14 a { 15 color: #c75f3e; 16 } 17 18 #mytable { 19 width: 700px; 20 padding: 0; 21 margin: 0; 22 } 23 24 caption { 25 padding: 0 0 5px 0; 26 width: 700px; 27 font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 28 text-align: right; 29 } 30 31 th { 32 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 33 color: #4f6b72; 34 border-right: 1px solid #C1DAD7; 35 border-bottom: 1px solid #C1DAD7; 36 border-top: 1px solid #C1DAD7; 37 letter-spacing: 2px; 38 text-transform: uppercase; 39 text-align: left; 40 padding: 6px 6px 6px 12px; 41 background: #CAE8EA url(images/bg_header.jpg) no-repeat; 42 } 43 44 th.nobg { 45 border-top: 0; 46 border-left: 0; 47 border-right: 1px solid #C1DAD7; 48 background: none; 49 } 50 51 td { 52 border-right: 1px solid #C1DAD7; 53 border-bottom: 1px solid #C1DAD7; 54 background: #fff; 55 font-size: 11px; 56 padding: 6px 6px 6px 12px; 57 color: #4f6b72; 58 } 59 60 td.alt { 61 background: #F5FAFA; 62 color: #797268; 63 } 64 65 th.spec { 66 border-left: 1px solid #C1DAD7; 67 border-top: 0; 68 background: #fff url(images/bullet1.gif) no-repeat; 69 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 70 } 71 72 th.specalt { 73 border-left: 1px solid #C1DAD7; 74 border-top: 0; 75 background: #f5fafa url(images/bullet2.gif) no-repeat; 76 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 77 color: #797268; 78 } 79 </style> 80 <body> 81 <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> 82 <caption>The technical specifications of the Apple PowerMac G5 series</caption> 83 <tr> 84 <th scope="col" abbr="Configurations">设置</th> 85 <th scope="col" abbr="Dual 1.8">1.8GHz</th> 86 <th scope="col" abbr="Dual 2">2GHz</th> 87 <th scope="col" abbr="Dual 2.5">2.5GHz</th> 88 </tr> 89 <tr> 90 <th scope="row" abbr="Model" class="spec">lipeng</th> 91 <td>M9454LL/A</td> 92 <td>M9455LL/A</td> 93 <td>M9457LL/A</td> 94 </tr> 95 <tr> 96 <th scope="row" abbr="G5 Processor" class="specalt">mapabc</th> 97 <td class="alt">Dual 1.8GHz PowerPC G5</td> 98 <td class="alt">Dual 2GHz PowerPC G5</td> 99 <td class="alt">Dual 2.5GHz PowerPC G5</td> 100 </tr> 101 <tr> 102 <th scope="row" abbr="Frontside bus" class="spec">Lennvo</th> 103 <td>900MHz per processor</td> 104 <td>1GHz per processor</td> 105 <td>1.25GHz per processor</td> 106 </tr> 107 <tr> 108 <th scope="row" abbr="L2 Cache" class="specalt">Black</th> 109 <td class="alt">512K per processor</td> 110 <td class="alt">512K per processor</td> 111 <td class="alt">512K per processor</td> 112 </tr> 113 </table> 114 </body> 115 </html> ログイン後にコピー 3. ヘッダー body> 、 |
