0
点赞
收藏
分享

微信扫一扫

html表格练习

深夜瞎琢磨 2022-01-20 阅读 38
html前端

代码,数据是随便写的

<table>
			<caption> 各项数据 </caption>		
			<!-- 标题 -->
			
			<thead>
				<tr>
					<th scope="col" rowspan="2"  colspan="2"></th>
					<th scope="col" rowspan="2">种类</th>
					<th scope="col" rowspan="2">图片</th>
					<th scope="col" rowspan="2">Calories</th>
					<th scope="col" colspan="4" rowspan="1">Fat (g)</th>					
					<th scope="col" rowspan="2">Cholesterol (mg)</th>
					<th scope="col" rowspan="2">Cholesterol (mg)</th>
					<th scope="col" rowspan="2">Vitamin A (IU)</th>
				</tr>	
				
				<tr>
					<th scope="col">Saturated Fat (g)</th>
					<th scope="col">Trans Fat (g)</th>
					<th scope="col">Polyunsaturated Fat (g)</th>
					<th scope="col">Monounsaturated Fat (g)</th>						
				</tr>
				
			<tbody>
				<tr>
					<th scope="row" rowspan="4">breakfast </th>					
					<th scope="row" rowspan="2">bread</th>
					<th scope="row" rowspan="1">Gluten-Free
					</th>				
					<td><img src="img/1.jpeg"/> </td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
							
				</tr>
				
				<tr>
					<th scope="row" rowspan="1">
						Gluten Free Cinnamon Raisin Bagels
					</th>					
					<td><img src="img/2.jpeg"/></td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					
				</tr> 
				
				
				<tr>
					<th scope="row" rowspan="2">Drinks</th>
					<th scope="row" rowspan="1">
						Chocolate Pumpkin Smoothie
					</th>					
					<td><img src="img/3.jpeg"/></td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
									
				</tr>
				
				<tr>
					<th scope="row" rowspan="1">
						Peanut Butter and Jelly Smoothie123
					</th>
					<td><img src="img/4.jpeg"/></td>
					<td>145</td>
					<td>145</td>
					<td>145</td>
					<td>145</td>
					<td>145</td>
					<td>145</td>
					<td>145</td>
					<td>145</td>
					
				</tr>
         
              <tr>
				<th scope="row" rowspan="4">lunch</th>					
			
					<th scope="row" rowspan="2">cuisine	</th>
					
					<th scope="row" rowspan="1">Mexican Pasta Salad</th>
					
					<td><img src="img/5.jpeg"/></td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					
				</tr>
				
				<tr>
					<th scope="row" rowspan="1">Keto Taco Bowl</th>

					<td><img src="img/6.jpeg"/></td>
					<td>785</td>
					<td>785</td>
					<td>785</td>
					<td>785</td>
					<td>785</td>
					<td>785</td>
					<td>785</td>
					<td>785</td>
					
				</tr> 
				
	
				
				<tr>
					<th scope="row" rowspan="2">Sandwishes</th>
					<th scope="row" rowspan="1">Honey BBQ Chicken Salad</th>					
					<td><img src="img/7.jpeg"/></td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>				
				</tr>
				
				<tr>
					<th scope="row" rowspan="1">Chef’s Salad Lettuce Wraps</th>
					<td><img src="img/3.jpeg"/></td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>
					<td>123</td>			
				</tr> 			
			</tbody>
			</thead>		
		</table>

表格不能自动响应: 当你使用正确的布局容器 它们的默认宽度是父元素的 100%.

colspan=“number” 跨number行 同理td
th rowspan=“number” 跨number列 同理td
rowspan=“0” 告知浏览器使单元格横跨到表格组件中的最后一个行(thead、tbody 或 tfoot)

• thead需要嵌套在 table 元素中,放置在头部的位置,因为它通常代表第一行,第一行中往往都是每列的标题,但是不是每种情况都是这样的。

• tfoot 需要嵌套在 table 元素中,放置在底部 (页脚)的位置,一般是最后一行,往往是对前面所有行的总结。

• tbody 需要嵌套在 table 元素中,放置在 thead的下面或者

scope属性 (设置在th,html5不支持td)有两个可选的值 : colgroup 和 rowgroup。将其标记表头。

colgroup标签用于对html表格中的列进行组合,以便对其进行格式化,是用于设置css样式的。可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。
colgroup标签只能在table元素之内,在任何一个caption元素之后,在任何一个 thead、tbody、tfoot、tr元素之前使用;
colgroup标签设置的样式会被col标签设置的样式覆盖。
每一个tr标签代表着一行 ,编写表格时需要注意计算格子数和tr长度匹配,尤其在编写跨列表格时。

举报

相关推荐

表格练习:

HTML表格

html表格

HTML - html 表格(二)

HTML--表格

HTML|表格标签

0 条评论