需要准备的材料分别有:电脑、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>A、请使用 CSS 样式来居中文本。
B、代码中标点符号均为英文状态。
用IE6 Chrome Firefox试验的结果是,CSS中加入:
table {就一定居中。
如果没有实现居中,那就是你的其他代码元素的样式影响了table.