03-table.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <table border="6" width="500px">
  10. <!-- 标题的宽度是以表格的宽度为主 超出部分默认换行 -->
  11. <caption>我的标题题题题题题题题题题题题题题题题题题题题题题题</caption>
  12. <tr>
  13. <td>100</td>
  14. <td>200</td>
  15. <td>300</td>
  16. </tr>
  17. <tr>
  18. <td>400</td>
  19. <td>500</td>
  20. <td>600</td>
  21. </tr>
  22. </table>
  23. <h4>背景颜色:</h4>
  24. <!-- 这里的bgcolor使用的是颜色名 或者 十六进制 -->
  25. <table border="1" bgcolor="#ff5000">
  26. <tr>
  27. <td>First</td>
  28. <td>Row</td>
  29. </tr>
  30. <tr>
  31. <td>Second</td>
  32. <td>Row</td>
  33. </tr>
  34. </table>
  35. <br />
  36. <table width="400" border="1" align="left">
  37. <thead align="right">
  38. <tr>
  39. <!--
  40. <th align="left">消费项目....</th>
  41. <th align="center">一月</th>
  42. <th align="right">二月</th>
  43. -->
  44. <th>消费项目....</th>
  45. <th>一月</th>
  46. <th>二月</th>
  47. </tr>
  48. </thead>
  49. <tbody align="left">
  50. <tr>
  51. <td>衣服</td>
  52. <td>$241.10</td>
  53. <td>$50.20</td>
  54. </tr>
  55. <!--
  56. <tr>
  57. <td align="left">衣服</td>
  58. <td align="right">$241.10</td>
  59. <td align="right">$50.20</td>
  60. </tr>
  61. <tr>
  62. <td align="left">化妆品</td>
  63. <td align="right">$30.00</td>
  64. <td align="right">$44.45</td>
  65. </tr>
  66. <tr>
  67. <td align="left">食物</td>
  68. <td align="right">$730.40</td>
  69. <td align="right">$650.00</td>
  70. </tr>
  71. <tr>
  72. <th align="left">总计</th>
  73. <th align="right">$1001.50</th>
  74. <th align="right">$744.65</th>
  75. </tr>
  76. -->
  77. </tbody>
  78. </table>
  79. </body>
  80. </html>