在HTML中，我们可以使用表格（table）和列表（ul、ol）等元素来创建组织架构图，以下是一个简单的示例：
1、使用表格创建组织架构图
我们需要创建一个表格，并为其添加一些基本样式，这里我们使用CSS来设置表格的边框、间距等样式。
<!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 {
border-collapse: collapse;
width: 50%;
margin: 0 auto;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="3">部门1</th>
<td>员工1</td>
<td>员工2</td>
</tr>
<tr>
<td>员工3</td>
<td>员工4</td>
</tr>
<tr>
<td colspan="2">部门经理</td>
</tr>
<tr>
<th rowspan="3">部门2</th>
<td>员工5</td>
<td>员工6</td>
</tr>
<tr>
<td>员工7</td>
<td>员工8</td>
</tr>
<tr>
<td colspan="2">部门经理</td>
</tr>
</table>
</body>
</html>
在这个示例中，我们创建了一个包含两个部门的组织架构图，每个部门都有一个部门经理，以及若干个员工，我们使用rowspan属性来实现层级关系，部门1和部门2都有两个层级，所以我们分别为它们设置了rowspan="3"，我们还使用了colspan属性来实现单元格的合并，部门经理所在的单元格需要合并两行两列，所以我们设置了colspan="2"。
2、使用列表创建组织架构图
除了使用表格，我们还可以使用列表（ul、ol）元素来创建组织架构图，以下是一个使用无序列表（ul）的示例：
<ul style="list-style-type: none;">
<li style="display: flex; align-items: center;">部门1
<ul style="margin-left: 20px;">
<li>员工1</li>
<li>员工2</li>
</ul>
</li>
<li style="display: flex; align-items: center;">部门1 部门经理</li>
<li style="display: flex; align-items: center;">部门2
<ul style="margin-left: 20px;">
<li>员工3</li>
<li>员工4</li>
</ul>
</li>
<li style="display: flex; align-items: center;">部门2 部门经理</li>
</ul>
在这个示例中，我们使用无序列表（ul）来表示各个部门和员工，我们为每个部门和员工都添加了一个li元素，并为它们设置了display: flex和align-items: center样式，以实现水平排列和居中对齐，我们还为每个部门经理添加了一个嵌套的无序列表（ul），并在其外部添加了一个li元素，以实现层级关系，需要注意的是，为了保持样式的统一性，我们在内层的无序列表中移除了项目符号（通过设置list-style-type: none）。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/379230.html
微信扫一扫