4/07/2020

CSS表格:頁面佈局與定位

CSS(層疊樣式表)提供了表格佈局的功能,讓網頁設計者可以把網頁內容劃分成不同區塊(例如主版面main和側欄sidebar)。透過CSS指令分割之後,就可以將網頁內容佈置在不同區塊中,並且透過CSS的樣式指令來統一設置或變更各區塊的樣式。

本文介紹CSS表格的概念。若有興趣了解HTML表格,可點選HTML表格介紹


CSS表格的基本概念

*以HTML標記和CSS指令,把各區塊內容(例如#main和#sidebar)放置在不同的單元格設置中,使其形成網頁佈局。
*表格的基本架構:本文中,我以橫列(row)、直行(column)、單元格(cell)來稱呼。
*CSS表格的設置名稱:table、table-row、table-cell。
*每個單元格里的內容,要以HTML「塊元素」的形式存在,例如<p></p>或<div></div>。

以下示範把網頁分成#main和#sidebar兩大區塊,放在一個CSS表格中(也就是一個橫列中包含著兩行)。

*此表格只有一列,當中有兩行/兩單元格,左單元格放#main的內容,右單元格放#sidebar的內容。
*基本做法:
1) 在.html文件的<body></body>區域,使用<div>標記,來設置main和sidebar的結構,並且設定id。
2) 在.html文件的<head></head>區域,以<style></style>指定CSS表格樣式。

*詳細步驟:
1. 在.html文件的<body></body>區域,為整個表格區域設置一個標記<div id="tableContainer"></div>(設定id是為了方便CSS樣式設置)。
2. 為橫列設置一個<div id="tableRow"></div>。
3. 本範例的橫列中含有兩個單元格(也就是兩直行或兩欄的意思),並設置各自的id(即<div id="main"></div>和<div id="sidebar"></div>)。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>

 </head>
 <body>
     <div id="tableContainer">
       <div id="tableRow">
         <div id="main"><p>Main單元格的內容在此</p></div>
         <div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
       </div>
     </div>
 </body>
</html>

4. 接下來,在<head></head>區域,以<style></style>指定CSS表格樣式,分別指定CSS表格、橫列和單元格。(本文的後半部會提供另一種標示方式,也就是把CSS樣式指令直接放在HTML標記中。)此處我將main和sidebar兩單元格各自設置了背景顏色,以方便查看網頁呈現效果。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>
     <style type="text/css">
       div#tableContainer {
                           display: table;
       }
       div#tableRow {
                     display: table-row;
       }
       div#main {
                 display: table-cell;
                 background-color: #dddddd;
       }
       div#sidebar {
                    display: table-cell;
                    background-color: #aaaaaa;
       }
</style>
 </head>
<body>
     <div id="tableContainer">
       <div id="tableRow">
         <div id="main"><p>Main單元格的內容在此</p></div>
         <div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
       </div>
     </div>
 </body>
</html>

修改後,重新加載網頁,看看有什麼變化。是否sidebar的內容出現在右邊,而且左右兩個單元格是一樣大的。

5. 對這個CSS表格,我們可以增加各種樣式設定,使版面更美觀。請自行測試各種設定的效果。
border-spacing是單元格虛擬邊框之間的距離。
vertical-align是垂直對齊方式,此處選擇讓單元格內容向上對齊(top)。
Padding單元格內容與單元格邊緣的距離,又稱為內邊距。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>
     <style type="text/css">
       div#tableContainer {
                           display: table;
                           border-spacing: 10px;
       }
       div#tableRow {
                     display: table-row;
       }
       div#main {
                 display: table-cell;
                 background-color: #dddddd;
                 vertical-align: top;
                 width: 70%;
                 padding: 20px;
       }
       div#sidebar {
                    display: table-cell;
                    background-color: #aaaaaa;
                    vertical-align: top;
                    padding: 20px;
       }
</style>
 </head>
<body>
     <div id="tableContainer">
       <div id="tableRow">
         <div id="main"><p>Main單元格的內容在此</p></div>
         <div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
       </div>
     </div>
 </body>
</html>

以上只是最基本的設定。請試著調整瀏覽器視窗的寬度,看頁面的呈現是否理想?CSS表格的設置大致成形了!未來要設置兩欄或三欄的頁面佈局,就可以考慮使用CSS表格。


把CSS樣式指令直接放在HTML標記中

如果因為某些緣故無法或不方便直接修改<head></head>區域、無法或不方便修改.css文件,也可以把相關指令直接寫在HTML標記當中。以下將上面範例改為在HTML文件中設定。(id的設定可以省略,此處保留以便和前面的指令對照。)

<div id="tableContainer" style="display: table; border-spacing: 10px;">
   <div id="tableRow" style="display: table-row;">
     <div id="main" style="display: table-cell; background-color: #dddddd; vertical-align: top; width: 70%; padding: 20px;"><p>Main單元格的內容在此</p></div>
     <div id="sidebar" style="display: table-cell; background-color: #aaaaaa; vertical-align: top; padding: 20px;"><p>Sidebar單元格的內容在此</p></div>
   </div>
</div>

效果如下:
Main單元格的內容在此

1 則留言:

  1. Also, the sport isn't as vigorous or as well-liked as the one at Paradise Walkerhill, which is located not too removed from Gangnam itself. Nice is considerably objective but it's new, clear, 카지노사이트.online and usually not ever crowded. Its recreation distribution is strictly the identical as its sister on line casino up north. Some of the minimal betting limits used to be larger end result of} it being located in Gangnam, but last time I checked , Millennium Hilton Seven Luck had raised its limits as nicely. By greatest way|the method in which}, this recreation distribution is similar all throughout Korean casinos.

    回覆刪除