html 好看的table表格

以下是两种创建漂亮的HTML表格的方法：

1. 使用CSS样式

<style>
table {
  border-collapse: collapse;
}

table, table tr th, table tr td {
  border: 1px solid #000000;
}
</style>

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>

2. 在`<table>`标记中添加属性

<table border="1" cellspacing="0">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <td>数据4</td>
    <td>数据5</td>
    <td>数据6</td>
  </tr>
</table>

相关问题

html table表格

HTML的table元素用于创建表格，它由行（tr）和列（td）组成。表格可以用于展示结构化的数据，比如数据集、排行榜等。

以下是创建HTML表格的基本步骤：
1. 使用table标签创建表格：`<table></table>`
2. 在table标签内部，使用tr标签创建表格的行：`<tr></tr>`
3. 在tr标签内部，使用td标签创建表格的列：`<td></td>`
4. 在td标签内部，填写表格中的内容。

例如，下面是一个简单的HTML表格示例：

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

这个表格有3列和3行，第一行是表头，包含了"姓名"、"年龄"和"性别"三个列名，后面两行是具体的数据。

htmltable表格拆分

您可以使用JavaScript来拆分HTML表格。以下是一个简单的示例代码，它将把一个10行4列的表格拆分成两个5行4列的表格：

<table id="myTable">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
    <td>Row 1, Column 4</td>
  </tr>
  ...
  <tr>
    <td>Row 10, Column 1</td>
    <td>Row 10, Column 2</td>
    <td>Row 10, Column 3</td>
    <td>Row 10, Column 4</td>
  </tr>
</table>

<script>
  var table = document.getElementById("myTable");
  var numRows = table.rows.length;
  var numCols = table.rows[0].cells.length;
  var halfRows = Math.ceil(numRows / 2);
  
  // create first table
  var table1 = document.createElement("table");
  for (var i = 0; i < halfRows; i++) {
    var row = table.rows[i].cloneNode(true);
    table1.appendChild(row);
  }
  table.parentNode.insertBefore(table1, table);
  
  // create second table
  var table2 = document.createElement("table");
  for (var i = halfRows; i < numRows; i++) {
    var row = table.rows[i].cloneNode(true);
    table2.appendChild(row);
  }
  table.parentNode.insertBefore(table2, table);
  
  // remove original table
  table.parentNode.removeChild(table);
</script>

在上面的代码中，我们首先获取原始表格的行数和列数，然后计算出每个新表格应该有的行数。接下来，我们使用`cloneNode`方法复制原始表格中的每一行，并将其添加到新的表格中。最后，我们使用`insertBefore`和`removeChild`方法将新的表格插入到原始表格的位置，并将原始表格删除。