【表格設定】HTML中合併儲存格，對列組合應用樣式，適應各瀏覽器的內容換行，儲存格換行

【表格設定】HTML中合併儲存格，對列組合應用樣式，適應各瀏覽器的內容換行，儲存格換行

 

1、常用表格標籤 

普通

         <table> 

         |           <tr>

         |           |          <th></th>

         |           |          <td></td>

         |            </tr>

         </table>

 

常用

 

標籤	描述
<table>	定義表格
<th>	定義表格的表頭
<tr>	定義表格的行
<td>	定義表格單元
<caption>	定義表格標題
<colgroup>	定義表格列的組
<col>	定義用於表格列的屬性
<thead>	定義表格的頁首
<tbody>	定義表格的主體
<tfoot>	定義表格的頁尾

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

            tr :元素定義表格行，

            th :元素定義表頭,大多數瀏覽器會把表頭顯示為粗體置中的文本，

            td: 元素定義表格單元。

更複雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

           caption:定義表格的標題。標籤必須直接放置到 <table> 標籤之後。只能對每個表格定義一個標題。

                       所有主流瀏覽器都支援 <caption> 標籤。預設置中可通過 "text-align" 和 "caption-side" 能用來設定標題的對齊和顯示位置。

           colgroup：對錶格中的列進行組合，可以向整個列應用樣式。只能在 <table> 元素之內， <caption> 元素之後，任意元素之前使用 。

                      所有主流瀏覽器都支援 <colgroup> 標籤。如果想對 <colgroup> 中的某列定義不同的屬性，請在 <colgroup> 標籤內使用 <col> 標籤。

                                  <colgroup  span="2">一個或多個列定義屬性值。<col> 沒有結束標籤。只能在 table 或 colgroup 元素中使用 <col> 標籤。                     

                                           <colgroup>
                                                    <col span="2">表頭內容。作為 <table> 元素的子項目，出現在 <caption>、<colgroup> 元素之後，<tbody>、 <tfoot> 和 <tr> 元素之前。

                          元素內部必須包含一個或者多個 <tr> 標籤。

             tbody：用來規定表格的主體內容

             tfoot：用來規定表格的頁尾部分

                          三者結合起來使用通過使用這些元素，使瀏覽器有能力支援獨立於表格表頭和表格頁尾的表格主體滾動。

                          當包含多個頁面的長的表格被列印時，表格的表頭和頁尾可被列印在包含表格式資料的每張頁面上。

 

2、屬性  

屬性	值	描述
align	left center right	不贊成使用。請使用樣式代替。 規定表格相對周圍元素的對齊。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不贊成使用。請使用樣式代替。 規定表格的背景顏色。
border	pixels	規定表格邊框的寬度。
cellpadding	pixels %	規定單元邊沿與其內容之間的空白。
cellspacing	pixels %	規定儲存格之間的空白。
frame	void above below hsides lhs rhs vsides box border	規定外側邊框的哪個部分是可見的。
rules	none groups rows cols all	規定內側邊框的哪個部分是可見的。
summary	text	規定表格的摘要。
width	% pixels	規定表格的寬度。

 

3、邊框 

           border屬性 規定表格邊框的寬度。               

                                  <table border="1">  </table>     邊框為1px

           border-collapse：   屬性設定表格的邊框是否被合并為一個單一的邊框

                                       如果沒有指定 !DOCTYPE border-collapse 屬性在 IE8 及更早 IE 版本中是不起作用的。

collapse	如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性
separate	預設值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性
inherit	規定應該從父元素繼承 border-collapse 屬性的值

 

   製作一個各邊都為1px的邊框 

      1.                     <table border="1">  </table>          |

                             table{border-collapse:collapse}     |      -- --所有邊框都為1px 的表格

 

      2、                table    的CSS為  {  border-collapse:collapse;  border:none;  }

                           td         的CSS為  {  border:solid #000 1px;  }

 

 

 4、關於html中table表格tr,td的高度和寬度 

 

 1、table中的width和height設定及其作用：

     table 中設定的 height 其實是設定一個最小值，

                    當表格中的內容或者行高總值超過這個設定值時，會自動延長表格的height值，

                     當表格中的內容或者行高沒有達到這個值時，會自動擴大到這個值。

       table 中設定的 width 值一般為表格寬度的最大值，不能改變，即使內部的內容寬度超過也不能改變。

                   （這個內部內容如果是圖片的話是可以改變表格寬度的。）

 2、tr標籤中width和height設定及其作用：

       tr 標籤裡面的 width 設定不起任何作用。

       tr 中的 height 設定和幾個tr之間的設定有關。

                 當幾個 tr 都設定了 height 的具體數值時，各個 t r的 height 按照設定的值的比例來分配總的height值，

                 當幾個 tr 都沒有設定 height 具體值時，平均分配總的height值。

                 當 tr 設定了具體的數值，有的沒有設定具體的數值為預設時，先保證各個tr的基本需要，剩下的再滿足設定了具體值的tr，之後再全部給沒有設定具體值的tr。

                 寬度不夠 tr 總的設定值的情況，要滿足tr的基本需要，這裡會自動延長表格的height的。然後再考慮設定了height的tr，最後考慮沒有設定height的tr。

3、td標籤中width和height設定及其作用：

      td 的 width 是和所處的一列每個 td 的 width 都相關的，取其中最大的 width 作為這一列中每個 td 的 width，

                 各個 td 之間的寬度分配按照第二條中各 tr 的 height 分配規律，

                 各td的width不是平均分配，而是根據各自的實際內容按比例分配。

      td 的 height要 看這個td所在的行的最大高度來確定這一行的每個td的height，然後各個行的高度情況和tr中的height分配原則是一樣的。

4、td的height和tr的height之間的關係。

     首先肯定是根據內容的需要，在這個基礎上，再根據設定的值來確定，哪個設定的值大就按照哪個，

    如果一個設定了值一個沒有設定值，那麼按照設定值的算。

 

 

 

 5、表格內容自動換行一 漢族換行

        table-layout:fixed          //固定表格大小（不會被撐大）

        word-break:break-all;   //字串自動換行

 

table-layout

                                                所有主流瀏覽器都支援table-layout屬性。

值	描述
automatic	預設。列寬度由儲存格內容設定。
fixed	表的寬度和列的寬度固定，不隨儲存格中內容而改變 一.     設定了各個列的寬，沒有設表的寬：表的寬度等於各個列的寬度的和 二.     設定了表的寬度，沒有設各個列的寬度：各個列的寬度平均分配 三.     要是都沒設定寬度：表的寬度為100％，各個列的寬度平均分配
inherit	規定應該從父元素繼承 table-layout 屬性的值

                                              注意： IE7和更早的版本不支援"inherit"的值。IE8需要定義！DOCTYPE。IE9支援"inherit"。

 

                  要想固定table的總的寬度和每列的寬度：

                                      <table  id="Table1"> word-break

                    指定非CJK指令碼的斷行規則 (CJK指令碼是中國，日本和韓國（"中日韓"）指令碼)。

值	描述
normal	使用瀏覽器預設的換行規則。允許在詞間換行
break-all	允許在單詞內換行。不管在什麼位置，超過列寬時就回行 允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all	只能在半形空格或連字號處換行。 不允許 Chinese, Japanese, 和 Korean 回行

 

 

注意：
            1、(IE瀏覽器)使用 table-layout:fixed;強制table的寬度,內層td,th採用word-break : break-all;或者word-wrap : break-word ;換行

                       <table width="200">二、英文強行截斷換行

可以利用css中的word-break 風格來達到我們的目的：

1、設定table中的儲存格內容自動換行，為了滿足瀏覽器安全色性，需要在table中設定table-layout:fixed。

2、word-wrap在div屬性中能起到換行的作用，也可以在td中使用div,在div裡面設定。

<style type="text/css">
        table{border:1px red solid;height:300px; border-collapse: collapse;}
        table tr td{border:1px red solid;}
    </style>

  <table width="600px">6、合併儲存格

colspan    儲存格橫向跨越

rowspan   儲存格縱向跨越

                        <td  rowspan="3">     -- 縱向合并（跨越） 3 個 儲存格

                       <td   colspan="2" >      -- 橫行合并（跨越）2 個儲存格 

 7、列印表格每頁都有的表頭和列印分頁 

當頁面太長，列印的時候，要求，每頁上都要有表頭，結尾，

           表頭： 定義其thead，並對其樣式設定成：style="display:table-header-group"。

            結尾：定義其tfoot，並對style="display:table-footer-group"

 

<TABLE border="0">display:table-header-group;font-weight:bold">

                     <TR>

                              <TD >每頁都有的表頭 </TD>

                      </TR>
         </THEAD>

        <TBODY>display:table-footer-group;font-weight:bold">
　　　　<TR>

　　　　　　<TD >每頁都有的表尾</TD>

　　　　</TR>

　　</TFOOT>

</TABLE>

<input type=button value=" 打 印 " onclick=JavaScript:window.print()>