一、要制作的表格如下
二、代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格标签</title><style>
/* 表格标签:场景:在网页中以表格(行、列)形式整齐展示数据,如:班级表标签:标签 描述 属性/备注<table> 定义表格整体,可以包含多个<tr> border:规定表格边框的宽度width:规定表格的宽度border-collapse:表格边框是分开独立的还是合并的,collapse表示合并,separate表示分开 <tr> 表格的行,可以包裹多个<td><td> 表格单元格(普通),可以包裹内容 如果是表头单元格,可以替换为<th><th> 表示表头单元格,具有加粗居中效果 */table {border: 1px solid black; /* 设置表格的外边框为1个像素值,solid为实线,black为黑色 */width: 600px; /* 规定表格的宽度 */border-collapse:collapse; /* 表格内相邻边框是分开独立的还是合并的,collapse表示合并 */text-align: center; /* 元素中的文本的水平对齐方式为居中 */vertical-align: middle; /* 元素中的文本的垂直对齐方式为居中 */}/* tr {border: 1px solid black; 针对每一行的边框} */ td,th {border: 1px solid black;}</style>
</head>
<body><table><tr><th>序号 </th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1 </td><td><img src="img/huawei.jpg" width="100px"></td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2 </td><td><img src="img/alibaba.jpg" width="100px"></td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table>
</body>
</html>
三、表格标签