明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html表格知識總結(jié)

發(fā)表時間：2024-05-12 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]要踏入程序員的大門，我們必會經(jīng)過的路就是html，掌握基礎(chǔ)的html才能更好的學(xué)習(xí)接下來的技術(shù)，那么今天我們就來全方面的分享一下html表格相關(guān)的知識。1、<table>標記　　a，基本格式<table 屬性1=“屬性值” 屬性2 ＝屬性值>表格內(nèi)容</table&g...
要踏入程序員的大門，我們必會經(jīng)過的路就是html，掌握基礎(chǔ)的html才能更好的學(xué)習(xí)接下來的技術(shù)，那么今天我們就來全方面的分享一下html表格相關(guān)的知識。

1、<table>標記

　　a，基本格式<table 屬性1=“屬性值” 屬性2 ＝屬性值>表格內(nèi)容</table>

　　b，table 標記的屬性

　　　　width屬性：表示表格的寬度，他的值可以是像素（px）也可以是父級元素的百分之百（％）

　　　　height屬性：表示表格的高度，他的值可以是像素（px）也可以是父級元素的百分比（％）

　　　　border屬性：表示表格外邊框的寬度

　　　　align屬性：表格的顯示位置，值left居左顯示 center居中顯示 right居右顯示 默認left

　　　　cellspacing屬性：單元格時間的間距，默認2px ，單位像素

　　　　cellpadding屬性：單元格內(nèi)容與單元格邊框的顯示距離，單位像素

　　　　frame屬性：控制表格邊框的顯示距離

　　　　　　void(默認值) 表示無邊框

　　　　　　above 表示僅頂部有邊框

　　　　　　below 表示僅有底部邊框

　　　　　　hsides 表示僅有頂部邊框和底部有邊框

　　　　　　lhs 表示僅有左側(cè)邊框

　　　　　　rhs表示僅有右側(cè)邊框

　　　　　　vsides表示僅有左右側(cè)邊框

　　　　　　box 包含全部4個邊框

　　　　　　border包含全部4個邊框

　　　rules屬性：控制是否顯示以及如何顯示單元格之間的分割線

　　　　　　none（默認值）表示無分割線

　　　　　　all 表示包括所有分隔線

　　　　　　rows表示僅有行分割線

　　　　　　clos表示僅有列分割線

　　　　　　groups表示僅在行組合列組之間有分割線

　　c，制作一個簡單的網(wǎng)頁布局

2，<caption>標記

　　a，什么時候使用？在什么時候使用如果表格需要使用標題，那么就可以使用<caption>標記

　　b，如何使用？<caption>屬性的插入位置，直接位于<table>屬性之后就，<tr>表格行之前　

　　c，align屬性　

　　　　top：標題放在表格的上部

　　　　botton：標題放在表格的下部

　　　　left：標題放在表格的左邊

　　　　right：標題放在表格的右邊

3，<tr>標記

　　a，定義表格的一行，對于每一個表格行，都是由一對<tr>...</tr>標記表示，每一行<tr>標記哪可以嵌套多個<td>或者<th>標記

　　b，可選屬性

　　　　設(shè)置水平對齊方式 格式：align＝“顏色值”

　　　　botton：靠頂端對齊

　　　　top：靠底部對齊

　　　　middle：居中對齊

4，<td>和<th>

　　a，<td>和<th>都是單元格的標記，其必須嵌套在<tr>標簽內(nèi)，是成對出現(xiàn)

　　b，<th>是表頭標記，通常位于首行或者首列，<th>中的文字默認會被加粗，而<td>不會

　　c，<td>是數(shù)據(jù)標記，表示該單元格的具體數(shù)據(jù)

　　d，兩者的標記屬性都是一樣的

　　e，屬性

　　　　bgcolor：設(shè)置單元格背景

　　　　align：設(shè)置單元格背景

　　　　valign：設(shè)置單元格垂直對齊方式

　　　　width：設(shè)置單元格寬度

　　　　height：設(shè)置單元格高度

　　　　rowspan：設(shè)置單元格所占行數(shù)

　　　　clospan：設(shè)置單元格所占列數(shù)

eg：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table width="960" height="250" border="1" cellpadding="10" frame="box" >
        <caption>表格的標題</caption>
    <tr bgcolor="#ccc">
        <th bgcolor="red">班級</th>
        <th>姓名</th>
        <th>年級</th>
        <th>成績</th>
    </tr>
    <tr>
        <td>四年級一班</td>
        <td>張三</td>
        <td>16</td>
        <td>80</td>
    </tr>
        <tr>
        <td>四年級一班</td>
        <td>李四</td>
        <td>16</td>
        <td>70</td>
    </tr>
        <tr>
        <td>四年級一班</td>
        <td>王五</td>
        <td>16</td>
        <td>60</td>
    </tr>
    </table>
</body>
</html>

以上就是最基礎(chǔ)的html表格的一些相關(guān)內(nèi)容，根據(jù)上面的教程來完成一個表格，我相信你會有很大的收獲。

相關(guān)推薦：

全方位介紹HTML表格屬性

重新發(fā)現(xiàn)HTML表格

關(guān)于HTML表格的詳細介紹

HTML表格布局實際使用

HTML表格布局實例講解

以上就是html表格知識總結(jié)的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。

相關(guān)文章