猿问
下载APP

怎么用html 或CSS写出下列的表单样子

http://img.mukewang.com/594910c10001df4205860094.jpg

慕UI1458911
浏览 9478回答 31
31回答

小世界里的白日梦

<html><head><meta charset="utf-8"><title></title> <style> table{ border-collapse:collapse; } table td{  border:1px solid #ddd;  width:80px;  height:30px;  text-align:center; } .one{  vertical-align: top; } .two{ vertical-align: top; } </style></head><body><table> <tr> <td rowspan="3" class="one">1</td> <td rowspan="3" class="two">2</td> <td>A</td> <td>28</td> <td>12%</td> </tr> <tr> <td>B</td> <td>56</td> <td>98%</td> </tr> <tr> <td>A</td> <td>33</td> <td>42%</td> </tr></table></body></html>

慕桂英5357533

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{ border-collapse:collapse; } table td{ border:1px solid #0099FF; width:80px; height:10px; text-align:center; } .one{    vertical-align:top; } .two{ vertical-align:top; } </style> </head> <body> <table border="1"> <tr> <td rowspan="4" class="one">1</td> <td rowspan="4" class="two">200</td> <td>A</td> <td>80</td> <td>40%</td> </tr> <tr> <td>B</td> <td>96</td> <td>48.00%</td> </tr> <tr> <td>C</td> <td>18</td> <td>9.00%</td> </tr> <tr> <td>D</td> <td>6</td> <td>3.00%</td> </tr> </table> </body> </html>

Steam_

<!doctype html><html><head><meta charset="utf-8"><title>表格</title> <style type="text/css">  .table{   border:1px solid #333;} </style></head><body> <table cellspacing="0" cellpadding="0">  <tr class="table">         <td rowspan="4" class="table">1</td>            <td rowspan="4" class="table">200</td>            <td class="table">A</td>            <td class="table">80</td>            <td class="table">40.00%</td>        </tr>        <tr>         <td class="table">B</td>            <td class="table">96</td>            <td class="table">48.00%</td>        </tr>        <tr>         <td class="table">C</td>            <td class="table">18</td>            <td class="table">9.00%</td>        </tr>        <tr>         <td class="table">D</td>            <td class="table">6</td>            <td class="table">3.00%</td>        </tr> </table></body></html>

慕斯4031925

sbrdx

tanya雅

rowspan

Amnesia_

直接用表格。前面两个用rows="4"就可以了

weixin_慕尼黑4265959

使用表单标签,用dreamover还可以直接创建表格

慕圣4480347

<!doctype html><html><head><meta charset="utf-8"><title>表格</title>

子非鱼ya

这个可以啊

慕九州4422989

这个比较简单吧

精慕门9417850

啦啦啦啦

精慕门9417850

哈哈哈啊

精慕门9417850

我来回答

精慕门9417850

合并单元格的代码

精慕门9417850

范德萨范德萨

troyoqczaq

如此简单

qq_慕妹8155745

AAGAGAGAGA

山高丿路远

x效果图,代码在上面一楼

山高丿路远

<table width="709" height="334" border="1" cellpadding="1" cellspacing="1">  <tr>    <td width="90" rowspan="5"><div align="center">合并单元格</div></td>    <td width="90" rowspan="5"><div align="center">一样原理</div></td>    <td width="167"><div align="center">1</div></td>    <td width="167"><div align="center">2</div></td>    <td width="167"><div align="center">3</div></td>  </tr>  <tr>    <td><div align="center">6</div></td>    <td><div align="center">4</div></td>    <td><div align="center">4</div></td>  </tr>  <tr>    <td><div align="center">7</div></td>    <td><div align="center">2</div></td>    <td><div align="center">5</div></td>  </tr>  <tr>    <td><div align="center">8</div></td>    <td><div align="center">3</div></td>    <td><div align="center">6</div></td>  </tr>  <tr>    <td><div align="center">9</div></td>    <td><div align="center">8</div></td>    <td><div align="center">7</div></td>  </tr></table>

qq_浪漫小私奔_03656104

我也想知道答案
点击加载更多
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答