html5快速创建表格 html怎么快速创建表格

转载

laokugonggao 2023-11-15 15:02:08

文章标签 html5快速创建表格 html中快捷建立表格字段 CSS 背景色 文章分类 HTML5 移动开发

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

摘要:[HTML](note)如何快速建立一个美观的HTML表格(表格范本)

有时候在突然要画HTML表格时觉得慢慢刻很慢，又不想用开发软件内建的表格，

自己画也要再加上css修饰，故我小整理了一个表格的小范本，

以后要用时直接拿来修改。

如何快速建立一个美观的HTML表格

1、先建一个div准备来包住表格，并使用margin:0 auto让div对它上一层的容器，

也就是对body来置中。.table_out{

width:980px;
margin:0 auto;/*置中*/
}

2、先替“table1、th、td”各别建立3组空的CSS模式。.table1{

}
.table1 tr th{ /*设定表格中的标题字段模式*/
}
.table1 tr td{ /*设定表格中的内容字段模式*/
}

3、替table1设定宽度并设向上一层的div置中，th、th的宽度可先不设，高度则皆不设。.table1{

width:400px;
margin:0 auto;
}
.table1 tr th{ /*设定表格中的标题字段模式*/
}
.table1 tr td{ /*设定表格中的内容字段模式*/
}

4、替“table1、th、td”设定背景色，

注意:若th、td都有设背景色，则table所设的背景色就不会显示出来。.table1{

width:400px;
margin:0 auto;
background:#00F;
}
.table1 tr th{ /*设定表格中的标题字段模式*/
background:#FDE9D9;
}
.table1 tr td{ /*设定表格中的内容字段模式*/
background:#FFFFE0;
}

5、替“table1、th、td”设定框线宽度、框线模式、框线颜色;

并设定框线为“细线”。.table1{

width:400px;
background:#00F;
border:2px solid #ddd;
border-collapse:collapse;
}
.table1 tr th{ /*设定表格中的标题字段模式*/
background:#FDE9D9;
border:1px solid #ccc;
border-collapse:collapse;
}
.table1 tr td{ /*设定表格中的内容字段模式*/
background:#FFFFE0;
border:1px solid #ccc;
border-collapse:collapse;
}

6、接下来在html源代码中插入以下简单的标签套用CSS试试看:th-标题

th-标题

td-内容

th-标题td-内容

td-内容

7、每一栏的宽度直接设在第一列中的th-标题A、th-标题B、th-标题C中即可，

第二列之后的都不用设，此处建议以百分比来平均分配。th-标题

th-标题

td-内容

th-标题td-内容

td-内容

8、总结: