コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLシリーズ(8): table_html/css_WEB-ITnose

HTMLシリーズ(8): table_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:25:00
オリジナル
1206 人が閲覧しました

1. 基本テーブル:

表マーク

、行マーク 、セルマーク タグを追加して、さまざまな部分をさらに区別します。

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リー

関連ラベル：
HTML系列（八）：表格
ソース：php.cn
前の記事：意外と知られていない 7 つの CSS 単位_html/css_WEB-ITnose 次の記事：CSS3 傾斜傾斜と回転animation_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
HTMLテーブルはSQLでセルを結合します このクエリを使用して HTML テーブルを作成し、電子メールで送信します。 「グループ ID」列と「トランザクション合計合計」列の値が同じ場合にのみ、セルを結合して読みやすさを向上...
から 2024-03-30 16:45:17
0
2
324
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート

基本構文: 

<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> 、