table class="bordered"
1、table-striped：斑馬線表格
2、table-bordered：帶邊框的表格
3、table-hover：鼠標懸停高亮的表格
4、table-condensed：緊湊型表格(單元格的內距由8px調至5px。)
5、table-responsive：響應式表格(當你的瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時，表格底部水平滾動條就會消失)
6、“.table”主要有三個作用：
☑ 給表格設置了margin-bottom:20px以及設置單元內距
☑ 在thead底部設置了一個2px的淺灰實線
☑ 每個單元格頂部設置了一個1px的淺灰實線
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>服務器信息</title> 6 <style> 7 body{background-color:#eee; font-size:14px;} 8 table {*border-collapse: collapse; /* IE7 and lower */border-spacing: 0;width: 330px;color:#2B2B2B;} 9 .bordered {border: solid #DADADA 1px;padding-top:10px; background-color:#fff;} 10 .bordered tr,td{padding:10px;text-align:right;} 11 .bordered th{border-bottom: solid #DFE4E7 1px;text-align:left; padding-bottom:5px;text-indent:28px;} 12 .bordered td:nth-child(2){text-align:left;} 13 </style> 14 </head> 15 <body> 16 <table class="bordered"> 17 <tr><th colspan="2">服務器信息展示</th></tr> 18 <tr><td>當前PHP版本號：</td><td><?php echo PHP_VERSION;?></td></tr> 19 <tr><td>操作系統的類型:</td><td><?php echo PHP_OS;?></td></tr> 20 <tr><td>當前服務器時間:</td><td><?php echo date('Y年m月d日 H:i:s');?></td></tr> 21 <tr><td>當前PHP版本號：</td><td><?php echo PHP_INT_MAX;?></td></tr> 22 <tr><td>操作系統的類型:</td><td><?php echo PHP_INT_SIZE;?></td></tr> 23 </table> 24 </body> 25 </html>
<?php /* 說明：如果沒有HTML的 <meta charset="utf-8"> 指定字符集，中文會出現亂碼， 這是因為瀏覽器默認編碼為gbk。為了防止亂碼，可用此方式設置字符集。 */ header('Content-type:text/html;charset=utf-8'); ?> <!doctype html> <html> <head> <title>數學運算</title> <style> body{background-color:#eee; font-size:14px;} table {*border-collapse: collapse; /* IE7 and lower */border-spacing: 0;width:100%;color:#2B2B2B;} .bordered {border: solid #DADADA 1px; background-color:#fff;text-align:center;} .bordered tr,td{border: solid #DADADA 1px;padding:10px;} .bordered tr:nth-child(5){text-align:right;} .bordered tr:nth-child(6){text-align:right;} .bordered tr:nth-child(1){font-weight:bold;} span{color:red;} </style> </head> <body> <?php //定義一個常量，保存所有商品的折扣 const DISCOUNT = 0.8; //所有商品名稱 $fruit1 = '香蕉'; $fruit2 = '蘋果'; $fruit3 = '橘子'; //對應商品的購買數量（斤） $fruit1_num = 2; $fruit2_num = 1; $fruit3_num = 3; //對應商品的價格（元/斤） $fruit1_price = 7.99; $fruit2_price = 6.89; $fruit3_price = 3.99; //依次計算每件商品的總價格 $fruit1_total = $fruit1_num * $fruit1_price; $fruit2_total = $fruit2_num * $fruit2_price; $fruit3_total = $fruit3_num * $fruit3_price; //計算所有商品總價格 //計算公式：所有商品價格 =（香蕉總價格+蘋果總價格+橘子總價格）*商品折扣 $total = ($fruit1_total + $fruit2_total + $fruit3_total)*DISCOUNT; //拼接商品顯示信息，使商品在表格中有條理的顯示 $str = "<table class=\"bordered\">"; $str .= "<tr><td>商品名稱</td><td>購買數量(斤)</td><td>商品價格(元/斤)</td></tr>"; $str .= "<tr><td>$fruit1</td><td>$fruit1_num</td><td>$fruit1_price</td></tr>"; $str .= "<tr><td>$fruit2</td><td>$fruit2_num</td><td>$fruit2_price</td></tr>"; $str .= "<tr><td>$fruit3</td><td>$fruit3_num</td><td>$fruit3_price</td></tr>"; $str .= "<tr><td colspan=\"3\">商品折扣：<span>".DISCOUNT."</span></td></tr>"; $str .= "<tr><td colspan=\"3\">打折后購買商品總價格：<span>{$total}元</span></td></tr>"; $str .= "</table>"; //顯示輸出商品信息echo echo $str; ?> </body> </html>
<table class="bordered"> <thead> <tr> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> </thead> <tbody> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> </tbody> </table>