css让div里的表格居中对齐的方法有很多，可以改变改变表格的样式属性，也可以通过改变div的样式属性，这里介绍通过改变表格的样式属性使表格居中，这样不会改变div里除表格的其他元素的样式属性和位置。以下演示具体步骤：
1、打开HTML文件编辑器，新建一个HTML文件并添加HTML的基本元素标签。
2、添加好基本元素标签后在body里添加div元素，然后在div元素里面添加一个表格元素。
3、接下来配置div元素样式和表格元素样式，使得效果可以明显体现出来，这里使用的是行内式，也可以使用行外式和外部式。其中核心代码都是：margin：auto。
4、保存好后运行这个HTML文件。效果如图：
参考代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border-collapse: collapse
}
table, tr, td, th {
border: 4px solid black
}
th, td {
width: 200px
height: 50px
text-align: center
}
</style>
</head>
<body>
<table>
<tr style="height: 100px">
<td colspan="3">
<span style="display: blockpadding: 10pxborder: 3px solid blackwidth: 500pxfont-size: 23pxmargin: autofont-weight: bold">扫码文本框</span>
</td>
<td><span style="display: blockwidth: 70pxmargin: auto">加载历史入库信息</span></td>
</tr>
<tr>
<th>产品名称</th>
<th>装箱数量</th>
<th>箱数<span style="font-size: 10px">(默认1箱)</span></th>
<th>1</th>
</tr>
<tr>
<td>A</td>
<td>100</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>B</td>
<td>100</td>
<td>1</td>
<td rowspan="4"></td>
</tr>
<tr>
<td>A</td>
<td>100</td>
<td>1</td>
</tr>
<tr>
<td>合计：</td>
<td>300</td>
<td>3</td>
</tr>
<tr>
<td colspan="3"><span style="display: blockpadding: 5pxborder: 3px solid blackwidth: 500pxfont-size: 20pxmargin: autofont-weight: bold">确认</span></td>
</tr>
</table>
</body>
</html>
效果如下图：
DIV+CSS布局和TABLE布局的优缺点
TABLE布局是早以前CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。
什么是div+css?
DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。XHTML基于可扩展标记语言(XML)，是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
流行优势
1、符合W3C标准。
2、支持浏览器的向后兼容。
3、搜索引擎更加友好。
4、样式的调整更加方便。
5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。
6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。
一.div+css布局的好处：
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的'可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度(最重要的)(在IE中要将整个table加载完了才显示内容)。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
二.table布局的好处(table布局也不是一点用的没有，这点是毋庸置疑的)
1.容易上手。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
