時間：2023-07-25 23:54:01 | 來源：網(wǎng)站運營
時間：2023-07-25 23:54:01 來源：網(wǎng)站運營
用HTML5創(chuàng)建表格：
在線咨詢
Dreamweaver來創(chuàng)建熱點區(qū)域，其實就是一個簡單的軟件使用而已，了解整個流程就行了。這次介紹如何使用HTML5創(chuàng)建表格。表格在HTML文檔中也是一個比較重要的內容，除了可以清晰的顯示數(shù)據(jù)，在早期還被用來進行頁面布局和排版，但是在此一定要跟大家重點強調下：十分不不建議使用表格來進行頁面布局和排版等相關工作，弊端十分的多，很難進行維護，有時候網(wǎng)頁的崩潰就是因為使用了表格來進行頁面布局。HTML中的表格類似于Word軟件中的表格，如果你使用了像Dreamweaver之類的網(wǎng)頁制作軟件，基本操作也很相似。但我們這里還是用記事本來進行相關操作，畢竟只有掌握了一門技術的真正內涵才會創(chuàng)造出更方便更實用的東西。表格的基本結構
表格的基本操作
完整的表格標記
<table>、行對象<tr>、單元格對象<td>等。<table>標記用于標記一個表格對象的開始，</table>標記則表示結束。一個表格中，只允許出現(xiàn)一對<table>標記。。<tr>標記用于標識表格一行的開始，</tr>標記則標識結束。表格內有多少對<tr></tr>標記，就表示表格有多少行。<td>標記用于標記表格某行中的一個單元格開始，</td>標記則標識結束。<td></td>標記書寫在<tr></tr>標記內，一對<tr></tr>標記內有多少對<td></td>標記，就表示有多少個單元格。在HTML5中有colspan和rowspan兩個屬性，在表格的基本操作進行詳細說明。<table></table>標記，一對或者幾對<tr></tr>標記以及一對或者幾對<td></td>標記。一對<table></table>標記定義一個表格，一對``標記定義一行，一對```標記定義一個單元格。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表格基本結構</title> 6</head> 7<body> 8<table > 9 <tr>10 <td>A1</td>11 <td>B1</td>12 <td>C1</td>13 <td>D1</td>14 </tr>15 <tr>16 <td>A2</td>17 <td>B2</td>18 <td>C2</td>19 <td>D2</td>20 </tr>21 <tr>22 <td>A3</td>23 <td>B3</td>24 <td>C3</td>25 <td>D3</td>26 </tr> <!--表格基本結構-->27</table>28</body>29</html>在Mozilla Firefox的渲染結果如下：<td>標記中的兩個屬性就行。colspan屬性合并左右兩個單元格<td>標記中的colspan屬性來完成，格式如下：1<td colspan="數(shù)值">單元格內容</td>其中，colspan屬性的取值為數(shù)值型整數(shù)數(shù)據(jù)，代表幾個單元格進行左右合并。rowspan屬性合并上下兩個單元格<td>標記中的rowspan屬性來完成，格式如下：1<td rowspan="數(shù)值">單元格內容</td>其中，rowspan屬性的取值為數(shù)值型整數(shù)數(shù)據(jù)，代表幾個單元格進行左右合并。同樣也需要注意上述的問題。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表格基本結構</title> 6</head> 7<body> 8<table border="1"> 9 <tr>10 <td colspan="2">A1B1</td> <!--左右合并-->11 <td>C1</td>12 <td>D1</td>13 </tr>14 <tr>15 <td rowspan="2">A2 A3</td> <!--上下合并-->16 <td>B2</td>17 <td>C2</td>18 <td>D2</td>19 </tr>20 <tr>21 <td>B3</td>22 <td>C3</td>23 <td>D3</td>24 </tr> <!--合并單元格-->25</table> 26</body>27</html>其實，我們發(fā)現(xiàn)合并單元格就是“丟掉”某些單元格。<thead>、<tbody>、<tfoot>。<caption>表示表格的標題，在一行中除了<td>標記表示一個單元格以外，還可以使用<th>定義表格內的表頭單元格。<caption>標記定義了表格標題，<thead>、<tbody>和<tfoot>標記對表格進行了分組。在<thead>部分使用<th>標記代替<td>標記定義單元格，<th>標記定義的單元格默認加粗。<caption>標記必須緊隨<table>標記之后。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>創(chuàng)建表格</title> 6<style> 7 tfoot{background-color: #FF3;} 8 </style> 9</head>10<body>11<p>12<table width="200" border="1">13 <tr>14 <td colspan="2"> </td>15 <td> </td>16 <td> </td>17 </tr>18 <tr>19 <td> </td>20 <td> </td>21 <td rowspan="2"> </td>22 <td> </td>23 </tr>24 <tr>25 <td> </td>26 <td> </td>27 <td> </td>28 </tr>29</table>30</p>31 <table >32 <caption>學生成績單</caption>33 <thead>34 <tr>35 <th>姓名</th><th>性別</th><th>成績</th>36 </tr>37 </thead>38 <tfoot>39 <tr>40 <td>平均分</td><td colspan="2">540</td>41 </tr>42 </tfoot>43 <tbody>44 <tr>45 <td>張三</td>46 <td>男</td>47 <td>560</td>48 </tr>49 </tbody>50 <tr>51 <td>李四</td>52 <td>男</td>53 <td>520</td>54 </tr>55</table>56</body>57</html>還是希望各位去敲一敲。關鍵詞：表格,創(chuàng)建
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
