明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

html表格知識總結

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

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

1、<table>標記

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

　　b，table 標記的屬性

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

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

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

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

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

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

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

　　　　　　void(默認值) 表示無邊框

　　　　　　above 表示僅頂部有邊框

　　　　　　below 表示僅有底部邊框

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

　　　　　　lhs 表示僅有左側邊框

　　　　　　rhs表示僅有右側邊框

　　　　　　vsides表示僅有左右側邊框

　　　　　　box 包含全部4個邊框

　　　　　　border包含全部4個邊框

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

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

　　　　　　all 表示包括所有分隔線

　　　　　　rows表示僅有行分割線

　　　　　　clos表示僅有列分割線

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

　　c，制作一個簡單的網頁布局

2，<caption>標記

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

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

　　c，align屬性　

　　　　top：標題放在表格的上部

　　　　botton：標題放在表格的下部

　　　　left：標題放在表格的左邊

　　　　right：標題放在表格的右邊

3，<tr>標記

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

　　b，可選屬性

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

　　　　botton：靠頂端對齊

　　　　top：靠底部對齊

　　　　middle：居中對齊

4，<td>和<th>

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

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

　　c，<td>是數據標記，表示該單元格的具體數據

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

　　e，屬性

　　　　bgcolor：設置單元格背景

　　　　align：設置單元格背景

　　　　valign：設置單元格垂直對齊方式

　　　　width：設置單元格寬度

　　　　height：設置單元格高度

　　　　rowspan：設置單元格所占行數

　　　　clospan：設置單元格所占列數

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>

以上就是最基礎的html表格的一些相關內容，根據上面的教程來完成一個表格，我相信你會有很大的收獲。

相關推薦：

全方位介紹HTML表格屬性

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

關于HTML表格的詳細介紹

HTML表格布局實際使用

HTML表格布局實例講解

以上就是html表格知識總結的詳細內容，更多請關注php中文網其它相關文章！


網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。