如何用html,css建一个美观的表格
最省力气的方法是找一个前端UI框架(例如AmazeUI、Semantic UI),然后看下人家的表格是怎么写的,找到中意的,把相关HTML和CSS代码扒下来,再自己调整下即可。
html表格样式,只要最下面的为虚线,其他的都不显示
<table width="200px" height="300px" style="border-bottom:1px dotted;">
<tr></tr>
<tr></tr>
</table>
其中width为表格宽度,height为表格高度,style是通过css的方式限定表格下边框为虚线,边框宽度为1px。
希望对你有帮助,有不懂的我尽量帮忙,谢谢^^
已知表格样式如下,请根据此写出实现的HTML的代码
<table?border="1"?cellspacing="0"?cellpadding="2"?bordercolor="#000000">
<tr>
<td>1</td>
<td?colspan="2">2</td>
</tr>
<tr>
<td?rowspan="2">3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</table>自己调节一下大小就可以了
这种样式的表格用html的table和td怎么设计出来?
????????????
???????????????? |
????????????????
????????????????????
????????????????????????
????????????????????????????Data |
????????????????????????
????????????????????????
????????????????????????????Data |
????????????????????????????Data |
????????????????????????????Data |
????????????????????????
????????????????????
???????????????? |
???????????????? |
???????????????? |
???????????????? |
????????????
????????????
???????????????? |
????????????????
????????????????????
????????????????????????
????????????????????????????Data |
????????????????????????????Data |
????????????????????????????Data |
????????????????????????
????????????????????
???????????????? |
???????????????? |
???????????????? |
???????????????? |
????????????
????????????
???????????????? |
????????????????
????????????????????
????????????????????????
????????????????????????????Data |
????????????????????????????Data |
????????????????????????????Data |
????????????????????????
????????????????????
???????????????? |
???????????????? |
???????????????? |
???????????????? |
????????????
????????????
???????????????? |
????????????????
????????????????????
????????????????????????
????????????????????????????Data |
????????????????????????????Data |
????????????????????????????Data |
????????????????????????
????????????????????
???????????????? |
???????????????? |
???????????????? |
???????????????? |
????????????
????????????
???????????????? |
????????????????
????????????????????
????????????????????????
????????????????????????????Data |
????????????????????????????Data |
????????????????????????????Data |
????????????????????????
????????????????????
???????????????? |
???????????????? |
???????????????? |
???????????????? |
????????????
????????????
???????????????? |
????????????????
????????????????????
????????????????????????
????????????????????????????Data |
????????????????????????????Data |
????????????????????????????Data |
????????????????????????
????????????????????
???????????????? |
???????????????? |
???????????????? |
???????????????? |
????????????
????????
用HTML制作这样的表格
用图片可以方便的达到效果,
不用图片的的话应该也可以的,
我给你来个简单的,其他的自己看看弄吧
<!doctype?html>
<html?lang="en">
?<head>
??<meta?charset="UTF-8">
<style>
table{width:400px;height:200px;border:solid?#7B828B;border-collapse:collapse;border-spacing:0;?}
tr?{background-color:#A2AAB5;border-bottom:solid?1px;}
td{border-right:solid?1px?;color:white;}
.btn1{background-color:#898BE6;border:solid?2px?#626593;width:120px;height:50px;color:white;?}
.btn2{background-color:#BABCFD;border:solid?2px?#626593;width:120px;height:50px;?}
</style>
?</head>
?<body>
??<table>
??<tr?style="background-color:#B2B4FA">
<td?colspan="3">学习目标</td>
??</tr>
??<tr?style="background-color:#C6C5CC">
<td>今</td>
<td>if,for</td>
<td>while...</td>
??</tr>
??<tr>
<td>学习</td>
<td>1111</td>
<td>2222</td>
??</tr>
??<tr>
<td?colspan="3"?align="center">
<input?type="button"?value="提交"?class="btn1"?/>
<input?type="button"?value="提交2"?class="btn2"/>
</td>
??</tr>
??</table>
?</body>
</html>
怎么用CSS设置html中的表格边框样式
工具:
1. 代码编辑器
2. 浏览器
方法如下:
CSS代码:
table-a?table{border:2px?solid?red}
这里是可以根据需要进行修改的 HTML代码:
效果图如下: