介绍
两栏布局在Web开发中经常用到，比如左侧是导航栏，右侧是内容区域。在html中，有多种方法可以实现两栏布局。
使用表格
在HTML4中，table标签被广泛用于布局，可以用它来实现两栏布局。通常将左侧栏的宽度设置为一个固定值，右侧栏的宽度则设置为100%（或减去对应的宽度）。下面是使用表格实现两栏布局的代码：
<table>
<tr>
<td style="width:200px">左侧栏</td>
<td>右侧栏</td>
</tr>
</table>
这种方法能够适应各种浏览器，并且可以设置边框、背景色等效果。但是在语义上不够合理，可能会影响SEO（搜索引擎优化）。
使用浮动
在HTML5中，我们可以使用CSS来实现两栏布局，其中最简单的方法就是利用float属性。具体实现方法是将左侧栏设置为float:left;，右侧栏设置为float:right;，并且给右侧栏设置margin-left属性来控制两栏之间的间距。下面是使用浮动实现两栏布局的代码：
<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
<style>
.left {
float: left;
width: 200px;
}
.right {
float: right;
margin-left: 220px;
}
</style>
这种方法不依赖于表格，语义更合理，但是需要注意浮动元素会影响布局和自适应性。可以使用其他技术来清除浮动影响，比如在父元素中添加overflow: hidden;属性或使用clearfix技术。
使用flexbox
在HTML5中，我们还可以使用CSS3的flexbox布局来实现两栏布局。这种方法比较新，但是非常强大。具体实现方法是将父元素设置为display:flex;，并给左侧栏和右侧栏分别设置flex-basis和flex-grow属性。下面是使用flexbox实现两栏布局的代码：
<div class="container">
<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
</div>
<style>
.container {
display: flex;
}
.left {
flex-basis: 200px;
}
.right {
flex-grow: 1;
}
</style>
这种方法完全使用CSS实现，更加简洁、灵活，并且可以适应各种设备和浏览器。但是需要注意在不同的浏览器中可能存在兼容性问题，需要做好测试和兼容性处理。
总结
以上三种方法都能够实现两栏布局，分别使用了不同的技术和属性。在实际开发中，需要根据具体情况选择合适的方法，并且要考虑到浏览器兼容性、性能、语义等因素。