html 设计表格显示IO端口 及其状态 ，状态使用圆形的图标表示，状态分为高电平低电平两种状态，分别用黑色与绿色表示

可以使用如下的HTML代码来设计表格显示IO端口及其状态：

<table>
  <thead>
    <tr>
      <th>IO端口名称</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>IO端口1</td>
      <td>
        <div class="status-circle green"></div>高电平
      </td>
    </tr>
    <tr>
      <td>IO端口2</td>
      <td>
        <div class="status-circle black"></div>低电平
      </td>
    </tr>
    <tr>
      <td>IO端口3</td>
      <td>
        <div class="status-circle green"></div>高电平
      </td>
    </tr>
  </tbody>
</table>

CSS代码如下：

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 500px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.status-circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.green {
  background-color: green;
}

.black {
  background-color: black;
}

解释：

1. 使用HTML的`<table>`标签来创建表格，使用`<thead>`和`<tbody>`标签来分别定义表格头和表格体。
2. 使用`<th>`和`<td>`标签来定义表格的表头和表格体的单元格。
3. 使用自定义的`.status-circle`类来定义状态圆形图标的样式，使用`.green`和`.black`类来定义不同状态的颜色。
4. 在表格中，使用`<div>`标签来创建状态圆形图标，并在圆形图标后面插入文字表示状态。