HTML表格相關標記

表格的基本屬性及結構

基本屬性：

1. 1. <table>
  2. <caption>
  3. <tr>
  4. <td>和<th>屬性
  5. <thead>定義表格的頁眉
  6. <tfoot>定義表格的頁腳

table基本格式：<table>屬性1="屬性值1" 屬性2="屬性值2" 屬性3="屬性值3">表格內容</table>

1. table屬性
  1. width 表格的寬度，值包括：px、相對於父元素的%
  2. height 表格的高度，值包括：px、相對於父元素的%
  3. border 表格外邊框的寬度，值包括：px
  4. align 定義表格的位置，left居左 right居右 center居中。默認值left
  5. cellspacing 單元格之間的距離，默認是2px，單位px
  6. cellpadding 單元格內容與單元格邊框的顯示距離。單位px
  7. fram 控制表格邊框最外層的四條線框
    1. void（默認）無邊框
    2. above 僅頂部邊框
    3. below 僅底部邊框
    4. hsides 僅頂部和底部有邊框
    5. ihs 僅左側邊框
    6. ris 僅右側邊框
    7. vsides 左右側邊框
    8. box 全部4個邊框
    9. border 包含全部4個邊框
2. rules 控制是否顯示以及如何顯示單元格之間的分割線
  1. 1. none（默認）表示無分割線
    2. all 表示包括所有分割線
    3. rows 表示僅有行分割線
    4. clos 表示僅有列分割線
    5. groups 表示僅在行組和列組之間有分割線
3. <tr>標記定義表格的一行，對於每一個表格行，都由一對<tr>...</tr>標記表示每一行，<tr>標記內可以嵌套多個<td>或者<th>標記

tr屬性：

- bgcolor設置背景顏色格式bgcolor="顏色值"
- align 設置垂直方向對齊方式 align="top/center/bottom"

4.<td>和<th>都是單元格的標記。<td>必須嵌套在<tr>內，成對出現

區別：1.<th>是表示頭標記，通常位於首行或者首列。<th>中的文字默認會被加粗，而<td>不會。

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

共點：兩者的標簽屬性都是一樣的。

屬性：

bgcolor單元格的背景顏色
<rowspan>一列跨多行
<colspan>一行跨多列
<valign>垂直對齊方式
<align>單元格對齊方式

<height>/<width>單元的高度/寬度

<html>
<head>
    <title>表格的制作演練</title>
    <meta charset="utf-8">
</head>
<body>
<table frame="border" cellpadding="15" cellspacing="0" align="center" rules="all" width="960" height="500">
    <tr align="center" bgcolor="#ccc">
        <th>班級</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>成績</th>
    </tr>
    <tr align="center">
        <td>四年級一班</td>
        <td>王三霞</td>
        <td>11</td>
        <td>85</td>
    </tr>
    <tr align="center">
        <td>四年級一班</td>
        <td>王二霞</td>
        <td>11</td>
        <td>85</td>
    </tr>
    <tr align="center">
        <td>四年級一班</td>
        <td>王霞</td>
        <td>11</td>
        <td>90</td>
    </tr>
    <tr align="center">
        <td>四年級一班</td>
        <td>王四霞</td>
        <td>11</td>
        <td bgcolor="red">60</td>
    </tr>
</table>
</body>
</html>

這是制作效果，大家可以檢測一下。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。