1. 了解CSS表格居中的基本原理

　　CSS表格居中是指通过CSS样式将表格元素在页面中水平或垂直居中对齐。实现表格居中的方法有多种，但基本原理都是通过设置表格元素的属性值来调整其位置。

　　例如，要水平居中一个表格，可以设置表格的`text-align`属性为`center`。这将使表格中的所有单元格都水平居中对齐。要垂直居中一个表格，可以设置表格的`vertical-align`属性为`middle`。这将使表格中的所有单元格都垂直居中对齐。

　　 2. 使用CSS代码设置表格居中

　　 2.1 水平居中

　　```css

　　table {

　　 text-align: center;

　　}

　　```

　　 2.2 垂直居中

　　```css

　　table {

　　 vertical-align: middle;

　　}

　　```

　　 2.3 同时水平和垂直居中

　　```css

　　table {

　　 text-align: center;

　　 vertical-align: middle;

　　}

　　```

　　 3. 使用CSS样式表设置表格居中

　　 3.1 创建CSS样式表

　　```css

　　/ CSS样式表 /

　　body {

　　 font-family: sans-serif;

　　}

　　table {

　　 width: 100%;

　　 border-collapse: collapse;

　　}

　　td, th {

　　 border: 1px solid black;

　　 padding: 5px;

　　}

　　.center {

　　 text-align: center;

　　}

　　.middle {

　　 vertical-align: middle;

　　}

　　```

　　 3.2 将CSS样式表链接到HTML文档

　　```html

　　

　　

　　

　　

　　

　　

　　

　　

CSS表格居中示例

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

姓名	年龄	性别
张三	20	男
李四	25	女

　　

　　

　　```

　　 3.3 使用CSS样式类设置表格居中

　　```html

　　

　　

　　

　　

　　

　　

　　

　　

CSS表格居中示例

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

姓名	年龄	性别
张三	20	男
李四	25	女

　　

　　

　　```

　　 4. 使用其他方法设置表格居中

　　 4.1 使用HTML属性设置表格居中

　　```html

　　

　　

　　

　　

　　

　　

　　

CSS表格居中示例

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

姓名	年龄	性别
张三	20	男
李四	25	女

　　

　　

　　```

　　 4.2 使用JavaScript设置表格居中

　　```javascript

　　function centerTable() {

　　 var table = document.getElementById("table");

　　 table.style.marginLeft = "auto";

　　 table.style.marginRight = "auto";

　　}

　　window.onload = centerTable;

　　```

　　 5. 总结

　　CSS表格居中是一种常用的网页布局技术，可以帮助网页设计师创建更加美观的网页。通过掌握CSS表格居中的基本原理和方法，网页设计师可以轻松地将表格元素在页面中居中对齐，从而提升网页的美观性。