使用table标签制作常用的html表格

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>www.baidu.com</td><td>搜索</td></tr></table></div>
</body>
</html>

这种方式有个不好的地方就是需要设置边框颜色时候无法设置

给table的边框设置颜色属性

<!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>www.baidu.com</td><td>搜索</td></tr></table>
</div>
</body>
</html>

使用th(table header)标签添加表头以及使用css的类选择器给对应的单元格添加背景色

<!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">www.baidu.com</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)而不是使用单元格嵌套

使用table标签制作常用的html表格相关推荐

layui常用的表单标签_Layui常用组件：表格（table）
快速使用添加删除编辑查看编辑删除 layui.use(['table'], function () { table.render({ elem: '#demo' ,url: 'url'// ...
HTML 用table标签制作一张简单的个人简历
该文章用于记录实训中的一个小作业 table标签的使用从名字中可以看出table标签在HTML中,table标签多用于制作表格. table结构中有多个子标签 caption 用于标明该表格的使用途 ...
使用table标签制作个人简历
通过制作个人简历,熟悉table标签的使用 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
html用table标签制作表格
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>&l ...
案例：使用HTML中的 table 标签制作一份个人简历
先看最终效果: 一.使用到的知识点这个小案例中主要使用到的知识点是表格标签中单元格的合并,还使用到了一些表格标签里面的属性,比如宽高属性.水平对齐属性,还有表格边框的设置和合并等. 二.单元格合并知 ...
html中隐藏单元格上边框,HTML table 标签边框问题（隐藏表格边框、单元格边框等）...
一.表格的常用属性基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间 ...
HTML table 标签边框问题（隐藏表格边框、单元格边框等)
一.表格的常用属性基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间 ...
纯css打造漂亮的html表格,table CSS制作好看的网页表格
幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性. 1.summary 和 caption 第一元素是表格的caption,它基本上用做表格的标题.尽管这不是必须有的元素, ...
html table 边框线隐藏,HTML table 标签边框问题（隐藏表格边框、单元格边框等）...
一.表格的常用属性基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间 ...

使用table标签制作常用的html表格

使用table标签制作常用的html表格相关推荐

最新文章

热门文章