html好看的表格样式怎么用CSS设置html中的表格边框样式

html好看的表格样式时间:2021-05-04 阅读:()

如何用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>