需要准备的材料分别有：电脑、chrome浏览器、html编辑器。
1、首先，打开html编辑器，新建一个html文件，例如：index.html。
2、其次，在index.html中的<style>标签中，输入css代码：table {margin: auto;} body{text-align: center;}。
3、最后，浏览器运行index.html页面，此时会发现通过用css让整个table在页面中水平居中成功。
css中让table水平居中的步骤如下：
步骤一：
假如创建一个三行四列的表格，设置表格边框为1，宽度为200px，高度为100px；
步骤二：
在html的head文件添加css样式，（因为css中没有明确的属性让table居中，所以相对定位的值需要自己调试。）如下；
运行程序，让整个table居中的问题就解决了
或者是在html中添加table的属性align="center";都可以实现table居中。
扩展资料：
CSS Table 属性
1.border-collapse 设置是否把表格边框合并为单一的边框。
2.border-spacing 设置分隔单元格边框的距离。
3.caption-side 设置表格标题的位置。
4.empty-cells 设置是否显示表格中的空单元格。
5.table-layout 设置显示单元、行和列的算法。
CSS中让整个table位置页面水平居中且不影响table内部结构可使用 center标签是最简单。
<center> 标签定义用法及案例：
对浏览器的支持：所有浏览器都支持 <center> 标签。
定义和用法：对其所包括的文本进行水平居中。
HTML 与 XHTML 之间的差异：
在 HTML 4.01 中，center 元素不被赞成使用。
在 XHTML 1.0 Strict DTD 中，center 元素不被支持。
标准属性：id, class, title, style, dir, lang, xml:lang。
事件属性：onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup。案例（table位置页面水平居中）：
<center>
//只对table整体水平居中。对table内部结构无任何影响。
<table width="300" border="0">
<tr>
<td>表格整体居中</td>
<td>表格整体居中</td>
</tr>
<tr>
<td>表格整体居中</td>
<td>表格整体居中</td>
</tr>
<tr>
<td>表格整体居中</td>
<td>表格整体居中</td>
</tr>
</table>
</center>- 使用提示：
A、请使用 CSS 样式来居中文本。
B、代码中标点符号均为英文状态。
<center>
<table>
<tr>
<td>
</td>
</tr>
</table>
</center>
用IE6 Chrome Firefox试验的结果是，CSS中加入：
table {
margin-right: auto;
margin-left: auto;
}就一定居中。
如果没有实现居中，那就是你的其他代码元素的样式影响了table.
