使用原生table制作三列三行简单表格

好的，请稍等片刻，我为您准备代码：

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

希望能对您有所帮助。

相关问题

使用原生table制作三列三行带标题简单表格

好的，下面是使用原生table制作三列三行带标题的简单表格的代码：

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
    </tr>
    <tr>
      <td>行3列1</td>
      <td>行3列2</td>
      <td>行3列3</td>
    </tr>
  </tbody>
</table>

希望这能帮到你！

html表格宽度拖拽,原生js实现 拖拽改变 table表格列宽

实现 HTML 表格宽度拖拽，可以使用原生 JavaScript 来实现。以下是一个简单的实现方式：

HTML 代码：

<table id="myTable">
  <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>

JavaScript 代码：

var table = document.getElementById("myTable");
var isResizing = false;
var lastDownX = 0;

// 设置每列的初始宽度
var columnWidths = [100, 100, 100];
for (var i = 0; i < table.rows[0].cells.length; i++) {
  table.rows[0].cells[i].style.width = columnWidths[i] + "px";
}

// 鼠标按下时记录位置
table.addEventListener("mousedown", function (e) {
  isResizing = true;
  lastDownX = e.clientX;
});

// 鼠标移动时改变列宽度
table.addEventListener("mousemove", function (e) {
  if (!isResizing) {
    return;
  }

  var cell = e.target.parentElement;
  var cellIndex = Array.from(cell.parentElement.children).indexOf(cell);
  var widthDiff = e.clientX - lastDownX;

  // 改变当前列的宽度
  var newWidth = columnWidths[cellIndex] + widthDiff;
  if (newWidth > 0) {
    cell.style.width = newWidth + "px";
    columnWidths[cellIndex] = newWidth;
    lastDownX = e.clientX;
  }
});

// 鼠标抬起时停止改变列宽度
table.addEventListener("mouseup", function (e) {
  isResizing = false;
});

以上代码会在表格中添加一个鼠标事件监听器，当用户按下鼠标并移动时，会根据鼠标的位置改变被选中列的宽度。需要注意的是，当用户拖动列宽度时，应该记录每列的初始宽度（在这里使用了 `columnWidths` 数组来记录），并在移动过程中修改当前列的宽度，而不是仅仅修改当前列的宽度。