html中的表格设计
<table>元素允许的内容：
-caption:表示一个表格的标题，它常常作为<table>的第一个子元素出现，同时显示在表格内容的最前面。
现在在一些网页中我们还能见到align的使用，但是已经不建议这样做了，如果我们想要实现相同的样式，可以使用css。
-colgroup:用来定义表中的一组列表。搭配着col使用。
-thead:定义了一组定义表格的列头的行。
-tbody:表格的主体。
-tr:表格的行，搭配th和tr使用，th表示表格中的列里面有标题意味的项，td就是我们平常说的列了，就算我们不设置表格的样式，它也会自动给我们提供样式，比如居中，加粗。<th>还有一个比较好用的两个属性：colspan和rowspan.其中colspan赋给相应的整数值，会合并相应的列数、rowspan赋给相应的整数值，会合并相应的行数。使用方法就是：
<table> <tr> <th colspan="2" scope="rowspan">The element</th> </tr> </table>
上面的scope可以不写，它是一种将表头单元与数据单元相关联的方法，用于标识某个单元是否是列、行、列组或行组的表头，屏幕阅读器可以利用该属性。
-tfoot:定义了一组表格中各列的汇总行。
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <table border="5"> <caption>餐食的一些数据(资料取自<a href="https://github.com/Dnijia/learnHtml/blob/main/task4_table/food.txt">cupcakes kale chips</a>,图片取自<a href="https://github.com/Dnijia/learnHtml/tree/main/task4_table/img">cupcakes kale chips图片库</a>)</caption> <thead> <tr> <th colspan="2" rowspan="2"> </th> <th rowspan="2">名字</th> <th rowspan="2">图片</th> <th rowspan="2">Calories</th> <th colspan="4">Fat</th> <th rowspan="2">cholesterol(mg)</th> <th rowspan="2">sodium(mg)</th> <th rowspan="2">VitaminA(IU)</th> </tr> <tr> <th height="20px">Saturated Fat(g)</th> <th>Trans Fat(g)</th> <th>Polyunsaturated Fat(g)</th> <th>Monounsaturated Fat(g)</th> </tr> </thead> <tbody> <tr> <th rowspan="8">breakfast</th> <tr> <th rowspan="4">bread</th> <tr> <td>Gluten-Free Bread</td> <td> </td> <td>134</td> <td>1g</td> <td>1g</td> <td>1g</td> <td>3g</td> <td>20</td> <td>162</td> <td>30</td> </tr> <tr> <td>Gluten-Free Cinamon Raisin Bagels</td> <td> </td> <td>390</td> <td>1g</td> <td> </td> <td> </td> <td> </td> <td>92</td> <td>914</td> <td>130</td> </tr> </tr> <tr> <tr> <th rowspan="4">drinks</th> <tr> <td>Chocolate pumpkim Smoothie</td> <td> </td> <td>297</td> <td>3</td> <td> </td> <td>1</td> <td>2</td> <td>10</td> <td>324</td> <td>22021</td> </tr> <tr> <td>Peanut Butter and Jelly Smoothie</td> <td> </td> <td>480</td> <td>5</td> <td> </td> <td>5</td> <td>8</td> <td>10</td> <td>209</td> <td> </td> </tr> </tr> </tr> </tr> </tbody> <tbody> <tr> <th rowspan="8">lunch</th> <tr> <th rowspan="4">cuisine</th> <tr> <td>Gluten-Free Bread</td> <td> </td> <td>134</td> <td>1g</td> <td>1g</td> <td>1g</td> <td>3g</td> <td>20</td> <td>162</td> <td>30</td> </tr> <tr> <td>Gluten-Free Cinamon Raisin Bagels</td> <td> </td> <td>390</td> <td>1g</td> <td> </td> <td> </td> <td> </td> <td>92</td> <td>914</td> <td>130</td> </tr> </tr> <tr> <tr> <th rowspan="4">sandwishes</th> <tr> <td>Chocolate pumpkim Smoothie</td> <td> </td> <td>297</td> <td>3</td> <td> </td> <td>1</td> <td>2</td> <td>10</td> <td>324</td> <td>22021</td> </tr> <tr> <td>Peanut Butter and Jelly Smoothie</td> <td> </td> <td>480</td> <td>5</td> <td> </td> <td>5</td> <td>8</td> <td>10</td> <td>209</td> <td> </td> </tr> </tr> </tr> </tr> </tbody> </table> </body> </html>
注：以上案例内容来源于：http://ife.baidu.com/%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E7%8F%AD/1-html/table.html
浙公网安备 33010602011771号