table 标签用于定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><style>body{text-align: center;}.table-class table{margin: 0px auto;/* table在页面的居中属性*/width: 30%;height: 100px;border-width: 1px; /*外边框粗细 */border-collapse: collapse; /* 合并边框 border一定要存在且不为零 */}</style><body><p>Table Demo</p><div class="table-class"><table width="400" border="1px"><tr><td width="105">站名</td><td width="181">网址</td><td width="112">说明</td></tr><tr><td>BAIDU</td><td></td><td>搜索</td></tr></table></div></body></html>
这种方式有个不好的地方 就是需要设置边框颜色时候 无法设置
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><style>body{text-align: center;}.table-class table{margin: 0px auto;/* table在页面的居中属性*/width: 30%;border-collapse: collapse;}.table-class td{margin: 0px auto;/* table在页面的居中属性*/width: 30%;height: 50px;border:3px #FF0000 solid;}</style><body><div class="table-class"><table width="400" border="0" cellspacing="0" cellpadding="0"><tr><td>站名</td><td>网址</td><td>说明</td></tr><tr><td>BAIDU</td><td></td><td>搜索</td></tr></table></div></body></html>
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><style>body{text-align: center;}.table-class table{margin: 0px auto;/* table在页面的居中属性*/width: 30%;border-collapse: collapse;}.table-class td, th{margin: 0px auto;/* table在页面的居中属性*/width: 30%;height: 50px;border:3px #FF0000 solid;}.color_gray{background-color: #d7d7d7;}</style><body><div class="table-class"><table width="400" border="0" cellspacing="0" cellpadding="0"><tr><th class="color_gray">站名</th><th>网址</th><th>说明</th></tr><tr><td>BAIDU</td><td class="color_gray"></td><td>搜索</td></tr></table></div></body></html>
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><style>body{text-align: center;}.table-class table{margin: 0px auto;/* table在页面的居中属性*/width: 50%;border-collapse: collapse;}.table-class td{margin: 0px auto;/* table在页面的居中属性*/height: 50px;border:1px #000000 solid;}.cell{margin: 0px auto;height: 100%;width : 100%;border:0px;}.cellbutton{margin: 0px auto;height: 100%;width : 100%;}.select_style{width: 100%;height:100%;font-size:20px;}</style><body><div class="table-class"><table width="400" border="0" cellspacing="0" cellpadding="0"><tr><td>测试1</td><td>测试2</td><td>测试3</td><td style="width:200px">测试4</td><td style="width:200px">测试5</td><td>保存</td><td>删除</td></tr><tr><td>1</td><td>2</td><td>1</td><td><input name="textAlarm12" type="text" class="cell"></input></td><td><select name="textSameTimeCall1" class="select_style"><option value=""></option><option value="1">开启</option><option value="0">关闭</option></select></td><td><button name="buttonSave" type="button" class="cellbutton">保存</button></td><td><button name="buttonDel" type="button" class="cellbutton">删除</button></td></tr></table></div></body></html>
最后关于单元格的组合问题，建议使用单元格合并的属性(colspan和rowspan)而不是使用单元格嵌套
