如何用HTML基本元素制作表格

時間：2023-09-14 03:36:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-14 03:36:01 來源：網(wǎng)站運(yùn)營

如何用HTML基本元素制作表格：

第2天【HTML基本元素】

主要內(nèi)容

1. 標(biāo)題標(biāo)簽
2. 段落標(biāo)簽
3. 強(qiáng)制換行
4. 水平線
5. 圖片
6. 超鏈接
7. 文本格式化標(biāo)簽
8. 列表
9. 表格

學(xué)習(xí)目標(biāo)

一、標(biāo)題

標(biāo)題（Heading）是通過 <h1> - <h6> 標(biāo)簽進(jìn)行定義的。

<h1> 定義最大的標(biāo)題。 <h6> 定義最小的標(biāo)題。

標(biāo)題很重要

請確保將 HTML 標(biāo)題 標(biāo)簽只用于標(biāo)題。不要僅僅是為了生成粗體或大號的文本而使用標(biāo)題。

搜索引擎使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。

因?yàn)橛脩艨梢酝ㄟ^標(biāo)題來快速瀏覽您的網(wǎng)頁，所以用標(biāo)題來呈現(xiàn)文檔結(jié)構(gòu)是很重要的。

應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。

二、段落

段落是通過 <p> 標(biāo)簽定義的。

<p>這是一個段落 </p>

<p>這是另一個段落</p>

三、換行

如果您希望在不產(chǎn)生一個新段落的情況下進(jìn)行換行（新行），請使用 <br> 標(biāo)簽：

<br /> 元素是一個空的 HTML 元素。

<p>這個<br>段落<br>演示了分行的效果</p>

四、水平線

<hr/> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。
hr 元素可用于分隔內(nèi)容。




<hr color="" width="" size="" align=""/>屬性：

color：設(shè)置水平線的顏色

width：設(shè)置水平線的長度

size：設(shè)置水平線的高度

align：設(shè)置水平線的對齊方式（默認(rèn)居中），可取值left|right

<p>這是一個段落。</p><hr> <p>這是一個段落。</p><hr> <p>這是一個段落。</p>五、圖片

<img> 標(biāo)簽定義 HTML 頁面中的圖像。

<img src="" alt="" title="" width="" height=""/>屬性：

Src：路徑（相對路徑、絕對路徑）

Alt：規(guī)定圖像的替代文本。

Width：規(guī)定圖像的寬度。

Height：規(guī)定圖像的高度

Title：鼠標(biāo)懸停在圖片上給予提示

六、超鏈接

HTML使用標(biāo)簽 <a>來設(shè)置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。

當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?br>
在標(biāo)簽<a> 中使用了href屬性來描述鏈接的地址。

默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

（1）一個未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線。

（2）訪問過的鏈接顯示為紫色并帶有下劃線。

（3）點(diǎn)擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會根據(jù) CSS 的設(shè)定而顯示。

<a href="url">鏈接文本</a>

七、文本格式化標(biāo)簽

<p>這是一個普通的文本- <b>這是一個加粗文本</b>。</p>

<p><em>強(qiáng)調(diào)文本</em></p>

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

<p><small> Copyright 1999-2050 by Refsnes Data.</small></p>

<p><strong>加粗文本</strong></p>

<p>這個文本包含 _{下標(biāo)}文本。</p>

<p>這個文本包含 ^{上標(biāo)} 文本。</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

效果如下：

八、列表

8.1無序列表

無序列表是一個項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。

無序列表使用 <ul> 標(biāo)簽

<ul><li>Coffee</li><li>Milk</li></ul>瀏覽器顯示如下：

<ul><li>的屬性type 擁有的選項(xiàng)

disc 默認(rèn)實(shí)心圓

circle 空心圓

square 小方塊

none 不顯示




<!--無序--><ul type="disc"> <li> apple</li> <li> pear</li> <li> peach</li></ul><!--無序--><ul type="circle"> <li> apple</li> <li> pear</li> <li> peach</li></ul><!--無序--><ul type="square"> <li> apple</li> <li> pear</li> <li> peach</li></ul><!--無序--><ul type="none"> <li> apple</li> <li> pear</li> <li> peach</li></ul>


8.2有序列表

同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。 有序列表始于 <ol> 標(biāo)簽。每個列表項(xiàng)始于 <li> 標(biāo)簽。

列表項(xiàng)使用數(shù)字來標(biāo)記。

<ol><li>Coffee</li><li>Milk</li></ol>


瀏覽器中顯示如下：

<ol><li>的屬性type 擁有的選項(xiàng)

1 表示列表項(xiàng)目用數(shù)字標(biāo)號（1,2,3...）

a 表示列表項(xiàng)目用小寫字母標(biāo)號（a,b,c...）

A 表示列表項(xiàng)目用大寫字母標(biāo)號（A,B,C...）

i 表示列表項(xiàng)目用小寫羅馬數(shù)字標(biāo)號（i,ii,iii...）

I 表示列表項(xiàng)目用大寫羅馬數(shù)字標(biāo)號（I,II,III...）

<ol> <li> 烤冷面</li> <li> 煎餅果子</li> <li> 麻辣燙</li> </ol> <ol type="A"> <li> 烤冷面</li> <li> 煎餅果子</li> <li> 麻辣燙</li> </ol> <ol type="a"> <li> 烤冷面</li> <li> 煎餅果子</li> <li> 麻辣燙</li> </ol> <ol type="I"> <li> 烤冷面</li> <li> 煎餅果子</li> <li> 麻辣燙</li> </ol> <ol type="i"> <li> 烤冷面</li> <li> 煎餅果子</li> <li> 麻辣燙</li> </ol>8.3自定義列表

自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。

自定義列表以 <dl> 標(biāo)簽開始。每個自定義列表項(xiàng)以 <dt> 開始。每個自定義列表項(xiàng)的定義以 <dd> 開始。

<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>瀏覽器顯示如下：







8.4本節(jié)作業(yè)

久、表格

表格在數(shù)據(jù)展示方面非常簡單，并且表現(xiàn)優(yōu)秀，通過與CSS的結(jié)合，可以讓數(shù)據(jù)變得更加美觀和整齊。

行、列、單元格 單元格特點(diǎn)：同行等高、同列等寬。













表格的基本語法：







創(chuàng)建一個3行3列的表格：

<table border="1px" width="300px"> <tr><!--tr: table row--> <td>11</td><!--td: table data--> <td>12</td> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> </table>

















設(shè)置單元格的填充間距為10，單元格之間的間距為0，紅色邊框

<table border="1px" width="300px" cellpadding="10"cellspacing="0" bordercolor="red"><tr><td>11</td><td>12</td><td>13</td></tr><tr><td>21</td><td>22</td><td>23</td></tr><tr><td>31</td><td>32</td><td>33</td></tr></table>











一般表格的第一行是標(biāo)題，并且是文本居中、加粗，將td換成th。

而某些數(shù)據(jù)需要居中，但不希望加粗，可以給td添加align="center"

<table border="1px" width="300px" cellpadding="10" cellspacing="0" bordercolor="red"> <tr> <!-- 第一行通常放th: table head常，表示表頭(標(biāo)題)--> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> <tr> <!-- 單元格文本居中 --> <td align="center">趙四</td> <td align="center">男</td> <td align="center">40</td> </tr> <tr> <td>賈玲</td> <td>女</td> <td>32</td> </tr></table>











表格的跨行跨列

有時，表格的結(jié)構(gòu)并沒有那么簡單，可能會存在跨行和跨列的情況：

跨行：







跨列：
















跨行、跨列并存：










這個問題看似很復(fù)雜，其實(shí)很簡單，在制作跨行和跨列的表格時，只需按照如下步驟就可以輕松搞定！：

首先做一個完整的表格：注意虛線部分，最終去掉這些虛線就是我們要的效果







找出最左上角那個“侵占”其他單元格的單元格，如下圖標(biāo)注數(shù)字的位置







觀察這個單元格“侵占”的是行還是列，算上自己總共是幾個？(行數(shù)用r表示，列數(shù)用c表示)：




如果是行：在這個單元格上添加 rowspan="r"

如果是列：在這個單元格上添加 colspan="c"

如果既有行又有列：在這個單元格上添加 rowspan="r" colspan="c"

把“被侵占”的單元格刪掉，刪除順序：從右向左，從上至下，否則很容易出錯！

按以上步驟完成一個跨行跨列的表格：

<table border="1" cellpadding="5" cellspacing="0" width="500" height="200"> <tr> <td></td> <td></td> <td colspan="3"></td> </tr> <tr> <td rowspan="4"></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td rowspan="2" colspan="2"></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr></table>

















本節(jié)作業(yè)