表格html怎么做_HTML输入

在网页设计中，HTML表格是一种非常常见的元素，用于展示和组织数据，HTML表格由<table>标签定义，每个表格行由<tr>标签定义，表格单元格由<td>标签定义，以下是一些基本的HTML表格创建方法：

1、创建一个简单的HTML表格：

<table>
  <tr>
    <td>第一行，第一列</td>
    <td>第一行，第二列</td>
  </tr>
  <tr>
    <td>第二行，第一列</td>
    <td>第二行，第二列</td>
  </tr>
</table>

2、添加表头：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>第一行，第一列</td>
    <td>第一行，第二列</td>
  </tr>
  <tr>
    <td>第二行，第一列</td>
    <td>第二行，第二列</td>
  </tr>
</table>

3、添加样式：

<style>
  table {
    width: 100%;
    bordercollapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    textalign: left;
  }
</style>
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>第一行，第一列</td>
    <td>第一行，第二列</td>
  </tr>
  <tr>
    <td>第二行，第一列</td>
    <td>第二行，第二列</td>
  </tr>
</table>

4、添加交互效果：

<script src="https://ajax.lug.ustc.edu.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("tr:even").css("backgroundcolor", "#f2f2f2");
});
</script>
<table id="myTable">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>第一行，第一列</td>
    <td>第一行，第二列</td>
  </tr>
  <tr>
    <td>第二行，第一列</td>
    <td>第二行，第二列</td>
  </tr>
</table>

以上代码将在表格的偶数行添加灰色背景，这只是一个基本的例子，你可以根据需要添加更多的CSS样式和JavaScript交互效果。