HTML Day2 table

表格

     tr:行
    td:單元格
    width: 表格寬度
    height:表格高度
    border:邊寬大小
    cellspacing:單元格之間的距離

cellspacing="0"



cellspacing="1"







cellspacing="2"



  cellspacing="3"



 cellspacing="30"



 *************************************************

 cellpadding:挑整內容位置
    align:對其方式 left center right

    加入在table 對齊表格
          tr    對齊整行
          td    對齊單元格  
    Valign: 垂直方向 只能用於 tr /td ; top middle bottom
    bordercolor: 邊框顏色
************************************
<table width="300" height="200" border="=1" cellspacing="0"  cellpadding="0" bordercolor="blue">
        <!-- 第一行 -->
        <tr align="center">
            <td valign="bottom">1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <!-- 第二行 -->
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <!-- 第三行 -->
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
  </table>












**********************************************
合併儲存格 colspan 

 左右兩格並一格

            <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <!-- <td>3</td> -->
            <td>4</td>

        </tr>














合併儲存格  rowspan 

 上下儲存格合併

          <tr>
            <td rowspan="2">1</td>
            <td colspan="2">2</td>
            <!-- <td>3</td> -->
            <td>4</td>

        </tr>






















************************************************************



留言

張貼留言

這個網誌中的熱門文章

HTML Day1

圖片
******HTML: 標記語言****** 標記:<文本> <html> 單標籤: <img/> 標籤對: <html> </html> 文本: 顯示文字 超文本:顯示文字、音樂、影音 範例: <html>     <head>            <title>hi Benny</title>     </head>     <body>         hello everybody     </body> </html> ******CSS :  層疊樣式表****** 加入 <div   style="width: 100px; height:100px; background:red;"></div> ******javascript****** 加入 JS後點擊紅色區域可以跟變改寬度 <div  onclick="this.style.width='200px';"   style="width: 100px; height:100px; background:red;"></div> HTML 基本結構 <!--注釋 快捷鍵 ctr + / --> <!-- 開頭檔--> <!DOCTYPE html>    <!--網頁正式內容 --> <html>                <head>             <...
閱讀完整內容

HTML&CSS Day4 CSS 嵌入方式 與 選擇器

  < html > < head >      < title > charset </ title >       <!-- 內部樣式表 -->       < style >           /* CSS註釋方式*/           /*書寫樣式中 空格 換行不影響*/           /* div{width: 100px; */               /* height: 100px; */               /* background:blue;} */                 /* 導入外部樣式  方法1*/                 /* 使用import 寫在 style */     ...
閱讀完整內容