ホームページ > 記事 > ウェブフロントエンド > HTMLシリーズ(8): table_html/css_WEB-ITnose
HTMLシリーズ(8): table_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:25:001119ブラウズ
1. 基本テーブル:
表マーク f5d188ed2c074f8b944552db028f98a1、行マーク a34de1251f0d9fe1e645927f19a896e8、セルマーク b6c5a531a458a2e790c1fd6421739d1c
基本構文:
<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> 、 タグを追加して、さまざまな部分をさらに区別します。
4.不定期テーブル
Colspan 属性は、セルがまたがることができる列の数を指定します。 rowspan 属性は、セルがまたがることができる行数を指定します。
1 <table border="1" cellpadding="0" cellspacing="0"> 2 <tr> 3 <th>单元格内的标题</th> 4 <th>单元格内的标题</th> 5 </tr> 6 <tr> 7 <td>单元格内的文字</td> 8 <td>单元格内的文字</td> 9 </tr>10 <tr>11 <td>单元格内的文字</td>12 <td>单元格内的文字</td>13 </tr>14 </table>
5. いくつかの一般的なテーブル デザイン
1. 丸いテーブル
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> 6 <meta content="yes" name="apple-mobile-web-app-capable" /> 7 <meta content="black" name="apple-mobile-web-app-status-bar-style" /> 8 <meta name="format-detection" content="telephone=no" /> 9 <title>第9章</title>10 </head>11 <body>12 <table cellspacing="0">13 <tr>14 <th>序号</th>15 <th>歌曲名</th>16 <th>演唱</th>17 </tr>18 <tr>19 <th>01</th>20 <td>小苹果</td>21 <td>筷子兄弟</td>22 </tr>23 <tr>24 <th>02</th>25 <td>匆匆那年</td>26 <td>王菲</td>27 </tr>28 <tr>29 <th>03</th>30 <td>喜欢你</td>31 <td>G.E.M.邓紫棋</td>32 </tr>33 <tr>34 <th>04</th>35 <td>当你老了</td>36 <td>莫文蔚</td>37 </tr>38 </table>39 <body>40 </body>41 </html>
2. ストライプ テーブル
rrリー
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。