HTML 簡單使用
阿新 • • 發佈：2018-12-23
HTML <table>簡單使用，效果如下：
貼上程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device_width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> <title>Title</title> <link rel="stylesheet" href="css/searchTalentDetails.css"/> <style> table { border-collapse:collapse; } td { height:25px; border:1px solid #e3e3e3; padding: 8px; } .td_left{ border-right-style: none; font-size: 14px; color: #999999 } .td_right{ border-left-style:none; font-size: 16px; text-align: right; color: #333333 } .td_title_merge{ font-size: 14px; color: #999999; background: #EBEBEB; } .td_merge_left{ border-right-style: none; font-size: 14px; color: #999999 } .td_merge_right{ border-left-style:none; text-align: right; font-size: 16px; color: #333333 } </style> </head> <body> <div> <span id="tipTitle">Hello world</span> <div id="tableBaseInfoStyle"> <table style="table-layout:fixed;" width="100%" cellpadding="0" cellspacing="0" border="1"> <!--Base Info--> <tr> <td class="td_title_merge" colspan="4">Base Info</td> </tr> <tr> <td class="td_left"> </td> <td class="td_right" id="td_1">--</td> <td class="td_left"> </td> <td class="td_right" id="td_2">--</td> </tr> <tr> <td class="td_left"> </td> <td class="td_right" id="td_3">--</td> <td class="td_left"> </td> <td class="td_right" id="td_4">--</td> </tr> <tr> <td class="td_merge_left" colspan="2"> </td> <td class="td_merge_right" colspan="2" id="td_6">--</td> </tr> <tr> <td class="td_merge_left" colspan="2"> </td> <td class="td_merge_right" colspan="2" id="td_7">--</td> </tr> <!--Detail Info--> <tr> <td class="td_title_merge" colspan="4">Detail Info</td> </tr> <tr> <td class="td_left"> </td> <td class="td_right" id="td_8">--</td> <td class="td_left"> </td> <td class="td_right" id="td_9">--</td> </tr> <tr> <td class="td_left"> </td> <td class="td_right" id="td_10">--</td> <td class="td_left"> </td> <td class="td_right" id="td_11">--</td> </tr> <tr> <td class="td_merge_left" colspan="2"> </td> <td class="td_merge_right" colspan="2" id="td_12">--</td> </tr> <tr> <td class="td_merge_left" colspan="2"> </td> <td class="td_merge_right" colspan="2" id="td_13">--</td> </tr> <tr> <td class="td_merge_left" colspan="2"> </td> <td class="td_merge_right" colspan="2" id="td_14">--</td> </tr> </table> </div> </div> </body> </html>