第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

五月的夏天 · 更新于 2020-11-04

認(rèn)識(shí)表格標(biāo)簽 table 標(biāo)簽

表格在我們的網(wǎng)頁(yè)中是非常常見(jiàn)的，比如我們要展示商品信息，工作安排，產(chǎn)品參數(shù)等都需要用到表格。那么在 html 中，使用表格就需要用到 table 標(biāo)簽了。但是表格不僅是 table 一個(gè)標(biāo)簽，需要用到和表格相關(guān)的一組標(biāo)簽，這一小節(jié)我們就來(lái)學(xué)習(xí)這些標(biāo)簽吧。

1. 表格的結(jié)構(gòu)

在使用表格標(biāo)簽之前，我們需要先認(rèn)識(shí)一下在 html 中表格是由哪些結(jié)構(gòu)構(gòu)成的。一般情況下，表格都表頭、表身構(gòu)成。表頭里面放每一列對(duì)應(yīng)的字段，一般是一個(gè)描述，如姓名、年齡等，表身則放每一個(gè)表頭對(duì)應(yīng)的具體的值，如張三對(duì)應(yīng)表頭的姓名，20 對(duì)應(yīng)表頭的年齡。表格有行和列的概念，行就代表一個(gè)數(shù)據(jù)的所有屬性，比如姓名：張三，年齡：20，而列則表示一個(gè)表頭對(duì)應(yīng)的所有數(shù)據(jù)，比如姓名這一列就只有姓名，如張三、李四等。通常情況下，我們都是先確定表頭，然后再確定每行對(duì)應(yīng)表頭的具體數(shù)據(jù)。

2. 表格的使用

想要編寫表格，需要用到表格的一組標(biāo)簽。table 標(biāo)簽表示表格整體，類似 ul 和 ol 表示列表整體一樣。在 table 標(biāo)簽里， thead標(biāo)簽表示表頭， tbody 標(biāo)簽表示表示。 在 table 表頭中， tr 標(biāo)簽代表行， th 標(biāo)簽代表表頭的每一項(xiàng)。在 tbody 標(biāo)簽中， tr 標(biāo)簽代表行， td 標(biāo)簽代表每一個(gè)表頭對(duì)應(yīng)的具體數(shù)據(jù)。代碼如下：

 <table>
    <!-- thead 代表表頭 -->
    <thead>
      <!-- tr代表表頭這一行 -->
      <tr>
        <!-- th代表表頭的每一項(xiàng) 會(huì)有加粗的效果 -->
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
      </tr>
    </thead>
    <!-- tbody 代表表身 表格的具體內(nèi)容 -->
    <tbody>
      <!-- tr代表表身的每一行 -->
      <tr>
        <!-- td代表對(duì)應(yīng)表頭的具體數(shù)據(jù) -->
        <td>小明</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小紅</td>
        <td>18</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>

效果如下:

圖片描述

我們可以給表格添加 border屬性給表格添加邊框，border屬性的值為正整數(shù)，默認(rèn)為 0，則無(wú)邊框，我們把border 設(shè)置為 1，代碼如下：

<table border='1'>
    <!-- 代碼和上面演示代碼一致 -->
    ...
</table>

則會(huì)呈現(xiàn)以下效果：

圖片描述

我們還可以給 table 設(shè)置cellpadding來(lái)使用單元格填充來(lái)創(chuàng)建單元格內(nèi)容與其邊框之間的空白，cellpadding值也是正整數(shù)，我們把表格的 cellpadding設(shè)置為 10，代碼如下：

<table border='1' cellpadding='10'>
    <!-- 代碼和上面演示代碼一致 -->
    ...
</table>

則效果如下：

圖片描述

我們還可以給 table 設(shè)置cellspacing來(lái)設(shè)置單元格與單元格直接的距離，cellspacing值也是正整數(shù)，我們把表格的 cellspacing設(shè)置為 10，代碼如下：

<table border='1' cellspacing='10'>
    <!-- 代碼和上面演示代碼一致 -->
    ...
</table>

效果如下：

圖片描述

我們也可以為表格添加標(biāo)題，那么我們就需要在 thead 標(biāo)簽前加上 caption 標(biāo)簽，而 caption 標(biāo)簽的內(nèi)容則是表格的標(biāo)題，代碼如下：

<table>
    <caption>學(xué)生表</caption>
    <!-- 代碼和上面演示代碼一致 -->
    ...
</table>

效果如下：

圖片描述

3. 注意事項(xiàng)

  1. tr 標(biāo)簽只能嵌套 th 和 td 標(biāo)簽，不能嵌套其他標(biāo)簽；
  2. tr 代表表格的每一行；
  3. td 標(biāo)簽的內(nèi)容必須和表頭的信息對(duì)應(yīng)。

4. 真實(shí)案例分享

北京大學(xué)官網(wǎng)

<table>
    <thead>
        <tr>
            <th>課號(hào)</th>
            <th>課程名稱</th>
            <th>開(kāi)課單位</th>
            <th>學(xué)分</th>
            <th>總周數(shù)<br>(起止周)</th>
            <th>課程類型</th>
            <th>上課時(shí)間</th>
            <th>班號(hào)</th>
            <th>上課教師</th>
            <th>備注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01132632</td>
            <td><p style="text-align:center;padding:5px;"><a href="http://elective.pku.edu.cn/elective2008/edu/pku/stu/elective/controller/courseDetail/getCourseDetail.do?kclx=BK&course_seq_no=BZ1920301132632_15745" target="_blank">生物化學(xué)討論課<br>Current topics on Biochemistry</a></p></td>
            <td>生命科學(xué)學(xué)院</td>
            <td>2</td>
            <td>2(1-2)</td>
            <td>A</td>
            <td><p>星期一(第10節(jié)-第12節(jié))</br>星期二(第10節(jié)-第12節(jié))</br>星期三(第10節(jié)-第12節(jié))</br>星期四(第10節(jié)-第12節(jié))</br>星期五(第10節(jié)-第12節(jié))</br>星期六(第10節(jié)-第12節(jié))</br></p></td>
            <td>1</td>
            <td>鐘上威</td>
            <td><p>6月29-7月7日，10-12節(jié)，選修同學(xué)需先修生物化學(xué)理論課</p></td>
		</tr>
		<tr>
    <td>01132022</td>
    <td><p><a href="http://elective.pku.edu.cn/elective2008/edu/pku/stu/elective/controller/courseDetail/getCourseDetail.do?kclx=BK&course_seq_no=BZ1920301132022_18636" target="_blank">遺傳學(xué)討論<br>Current topics on Genetics</a></p></td>
    <td>生命科學(xué)學(xué)院</td>
    <td>2</td>
    <td>2(3-4)</td>
    <td>A</td>
    <td><p>星期一(第10節(jié)-第12節(jié))</br>星期二(第10節(jié)-第12節(jié))</br>星期三(第10節(jié)-第12節(jié))</br>星期四(第10節(jié)-第12節(jié))</br>星期五(第10節(jié)-第12節(jié))</br></p></td>
	<td>1</td>
	<td>范六民</td>
	<td><p>上課時(shí)間：7月13日-7月24日，10-12節(jié)。選修同學(xué)需先修遺傳學(xué)理論課</p></td>
	</tr>
  </tbody>
</table>

5. 小結(jié)

  1. 表格的結(jié)果為表頭和表身，可以為表格添加標(biāo)題。
  2. thead 代表表頭，tbody 代表表身， thead 嵌套 tr 和 th， tbody 里嵌套 tr 和 td。
  3. tr 里只能嵌套 th 和 td， th 一般用來(lái)表示表頭，有加粗的樣式。 td 代表表頭對(duì)應(yīng)的具體數(shù)據(jù)。
  4. 原生的表格樣式比較丑，我們可以通過(guò) CSS 為表格設(shè)置樣式。

圖片描述