天天看點

表格元素

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}li.li1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}li.li3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}span.s1 {font: 12.0px 'PingFang SC'}span.s2 {font: 12.0px Helvetica}span.Apple-tab-span {white-space:pre}ul.ul1 {list-style-type: hyphen}

表格元素

一、元素
<table>:表示表格
<tr>:行
<td>:列
<th>:标題單元格,預設加粗,文字居中

<th>,<td>均屬于單元格,包含兩個合并屬性,colspan(列合并),rowspan(行合并)

<thead>添加表頭,

        <thead>
  <tr>
   <th>姓名</th>
   <th>性别</th>
   <th>婚否</th>
  </tr>
 </thead>
不管這段代碼放在編輯器的什麼位置,顯示的時候都會顯示在表格的第一行。
<tfoot>添加表腳,意思同表頭
<tbody>,表主體
<caption>,表标題。緊挨着表格的上方居中顯示表格的标題。
<colgroup>,設定列,為了處理某個列,span屬性定義處理哪些列。1:第一列,2:表示前兩列。如果要單獨設定第二列,那麼需要聲明兩個,先處理第一個,将列點移入第二位,在處理第二個即可。
<col>更靈活的設定列。表示單獨一列,一個表示一列,控制更加的靈活。如果設定了span則控制多列。
           

代碼:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>表格元素</title>
        
    </head>
    <body>
        <table border="1">
            <tr>
                <td>張三</td>
                <td>男</td>
                <td>未婚</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>已婚</td>
            </tr>
        </table>
        <br>
        <table border="1" style="width:300px;">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>婚否</th>
            </tr>
            <tr>
                <td>張三</td>
                <td>男</td>
                <td>未婚</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>已婚</td>
            </tr>
        </table>
        <br>
        <table border="1" style="width:300px;">
            <tr>
                <th rowspan="4">基本情況</th>
                <th>姓名</th>
                <th>性别</th>
                <th>婚否</th>
            </tr>
            <tr>
                <td>張三</td>
                <td>男</td>
                <td>未婚</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>已婚</td>
            </tr>
            <tr>
                <td colspan="3">統計:共兩人</td>
            </tr>
        </table>
        <br>
        <table border="1" style="width:300px;">
            <caption>這是一個表格</caption>
            <tr>
                <td>張三</td>
                <td>男</td>
                <td>未婚</td>
            </tr>
<!--表腳 -->
            <tfoot>
                <tr>
                    <td colspan="3">統計:共兩人</td>
                </tr>
            </tfoot>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>已婚</td>
            </tr>
<!--表頭 -->
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>婚否</th>
                </tr>
            </thead>
            
        </table>
        
        <br>
        <table border="1" style="width:300px;">
            <colgroup span="1" style="background:green">
            <colgroup span="1" style="background:red">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>婚否</th>
            </tr>
            <tr>
                <td>張三</td>
                <td>男</td>
                <td>未婚</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>已婚</td>
            </tr>
        </table>
    </body>
</html>