HTML基礎教學表格標籤LOGIN

HTML基礎教學表格標籤

表格標籤

#網頁中有類似word裡面的功能,當然,也會有類似excel裡面的功能,表格就是其中之一







######################### ###########################################################

表格的結構

<table>

        <tr>

 ;</td>

                <td></td>

 ;                <td></td> ;

        </tr>

        <tr>

                <td></ td>

                <td></td>

        </tr>

< ;/table>

#<table>屬性



  • #Width:表格寬度,單位可以是百分比,也可以是固定值。
  •  Height:表格高度。
  •  Align:表格水平對齊方式,取值:left、center、right
  •  Border:邊框粗細。
  •  Bordercolor:邊框顏色。
  •  bgColor:表格背景色。
  •  background:背景圖片URL。
  •  cellpadding:儲存格邊線到內容間的距離(填滿距離)

 cellspacing:儲存格與儲存格之間的距離(間距)

 rules:合併儲存格邊框線,取值:all

## 注意:rules相容性不好,請使用CSS來取代它。


我們來實際畫一個表格吧

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr>
             <td>工号</td>
             <td>姓名</td>
             <td>职位</td>
         </tr>
         <tr>
             <td>001</td>
             <td>小明</td>
             <td>设计师</td>
         </tr>
         <tr>
             <td>002</td>
             <td>小方</td>
             <td>工程师</td>
         </tr>
         <tr>
             <td>003</td>
             <td>小白</td>
             <td>程序员</td>
         </tr>
     </table> 
    </body>
</html>

  • <tr>屬性-行標記
  • #bgColor:行的背景顏色

    ######### height:行的高度############ align:行中的文字水平居中,取值:left、center、right###
  • valign:垂直居中,取值:top(上)、middle(中)、 bottom(下)

 


<td>或<th>屬性

< td>是普通單元格,<th>是標題單元各,居中加粗顯示。

  •  width:儲存寬度

  • # height:儲存格高度

  • ## bgColor :儲存格背景色

  •  background:儲存格背景圖片

  •  align:水平對齊

  •  valign:垂直水齊

  • rowspan:上下儲存格合併。合併屬性必須放在第一個儲存格中。

  •  colspan:左右儲存格合併。合併時,有增就得有減,要確保每一行單元格的個數不變。

 實例:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

註:屬性是區分大小寫的,bgColor如果寫成bgcolor是沒有效果的

#大家可以將每個屬性都輸入,查看輸出效果



caption標籤

#為表格新增標題與摘要

摘要

#摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化),使搜尋引擎更好的讀懂表格內容,還可以使螢幕閱讀器更好的幫助特殊使用者讀取表格內容。

 語法:<table summary="表格簡介文字">

#標題

用以描述表格內容,標題的顯示位置:表格上方。

語法:

<table>    <caption>標題文字</caption>
   <tr>
      <td<tr>
      <td<tr>
     gt; ##        <td>…</td>

       …

   </tr></table>

#;

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"summary="日历信息">
         <caption>2016.10日历</caption>
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

#######下一節
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"> <tr> <td>工号</td> <td>姓名</td> <td>职位</td> </tr> <tr> <td>001</td> <td>小明</td> <td>设计师</td> </tr> <tr> <td>002</td> <td>小方</td> <td>工程师</td> </tr> <tr> <td>003</td> <td>小白</td> <td>程序员</td> </tr> </table> </body> </html>
章節課件