一、要制作的表格如下
二、代码如下
html
<!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>三、表格标签
