CSS ???
CSS ???
CSS? ???? HTML ???? ??? ?? ???? ? ????.
??? ???
border ??? ???? CSS ??? ???? ?????.
?? ???? ???? Th ? TD ??? ??? ???? ?????.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> table,th,td { border:1px solid black; } </style> </head> <body> <table> <tr> <th>數(shù)學(xué)</th> <th>語文</th> </tr> <tr> <td>90</td> <td>98</td> </tr> <tr> <td>95</td> <td>94</td> </tr> </table> </body> </html>
????? ???? ??? ???
??: ? ?? ????? ?? ???? ????. ?? ??? ??? th/td ??? ??? ??? ?? ?????.
???? ?? ???? ????? border-collapse ??? ?????.
Collapse border
border-collapse ??? ???? ???? ?? ???? ??? ???? ?????.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> table { border-collapse: collapse; } table, td, th { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>數(shù)學(xué)</th> <th>語文</th> </tr> <tr> <td>90</td> <td>98</td> </tr> <tr> <td>95</td> <td>94</td> </tr> </table> </body> </html>
????? ???? ??? ???
??? ??? height
Width ? height ??? ???? ??? ??? ?????.
?? ?? ??? 100%? ???? ??? ??? 50??? ??? ????.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> table,td,th { border:1px solid black; } table { width:100%; } th { height:50px; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>0</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>0</td> </tr> </table> </body> </html>
????? ???? ??? ???
? ??? ??
??? ?? ? ?? ?? ?? ??.
text-align ??? ??, ??? ?? ???? ?? ?? ??? ?????.
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> table,td,th { border:1px solid black; } td { text-align:right; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>0</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>0</td> </tr> </table> </body> </html>
????? ???? ??? ???
?
??, ??, ?? ? ?? ??? ???? ?? ?? ??:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> table, td, th { border:1px solid black; } td { height:50px; vertical-align:bottom; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>0</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>0</td> </tr> </table> </body> </html>
????? ???? ??? ???
??? ???
??? ??? ???? ???? ??? ?? td? ?? ?? ??? ????? td? ?? ??? ??? ??? ???? ???.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> table, td, th { border:1px solid black; } td { padding:15px; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>0</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>0</td> </tr> </table> </body> </html>
????? ???? ??? ???
??? ??
?? ?? ??? ??? ?? ??? ??? ? ?? ??? ?????.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> table, td, th { border:1px solid green; } th { background-color:green; color:white; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>0</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>0</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>0</td> </tr> </table> </body> </html>
????? ???? ??? ???
Instance
?? ??? ???
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #customers td, #customers th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #customers tr.alt td { color:#000000; background-color:#EAF2D3; } </style> </head> <body> <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="alt"> <td>Berglunds snabbk?p</td> <td>Christina Berglund</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr class="alt"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr class="alt"> <td>K?niglich Essen</td> <td>Philip Cramer</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr class="alt"> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>Simon Crowther</td> <td>UK</td> </tr> <tr class="alt"> <td>Paris spécialités</td> <td>Marie Bertrand</td> <td>France</td> </tr> </table> </body> </html>
???? ?? ??? ?? ????