为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕UI1458911 2017-06-20 20:10:59

http://img1.sycdn.imooc.com/594910c10001df4205860094.jpg

查看完整描述

31 回答

已采纳
?
小世界里的白日梦

//img1.sycdn.imooc.com/594a27a40001909704550151.jpg

<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>

查看完整回答
10 反对 回复 2017-06-21
?
慕桂英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>


查看完整回答
9 反对 回复 2018-01-19
?
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>


查看完整回答
2 反对 回复 2019-01-20
?
慕斯4031925

sbrdx

查看完整回答
2 反对 回复 2017-09-17
?
tanya雅

rowspan

查看完整回答
1 反对 回复 2018-09-27
?
Amnesia_

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

查看完整回答
1 反对 回复 2017-06-21
?
weixin_慕尼黑4265959

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

查看完整回答
反对 回复 2020-06-05
?
慕圣4480347

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

查看完整回答
反对 回复 2020-03-08
?
子非鱼ya

这个可以啊

查看完整回答
反对 回复 2020-03-06
?
慕九州4422989

这个比较简单吧

查看完整回答
反对 回复 2020-03-06
?
精慕门9417850

啦啦啦啦

查看完整回答
反对 回复 2020-02-21
?
精慕门9417850

哈哈哈啊

查看完整回答
反对 回复 2020-02-21
?
精慕门9417850

我来回答

查看完整回答
反对 回复 2020-02-21
?
精慕门9417850

合并单元格的代码

查看完整回答
反对 回复 2020-02-21
?
精慕门9417850

范德萨范德萨

查看完整回答
反对 回复 2020-02-07
?
troyoqczaq

如此简单

查看完整回答
反对 回复 2020-02-03
?
qq_慕妹8155745

A


AGA

G

AG

A

G

A

查看完整回答
反对 回复 2019-12-24
?
山高丿路远

//img2.sycdn.imooc.com/5daad3a20001ee6307520361.jpgx效果图,代码在上面一楼

查看完整回答
反对 回复 2019-10-19
?
山高丿路远

<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>


查看完整回答
反对 回复 2019-10-19
?
qq_浪漫小私奔_03656104

我也想知道答案

查看完整回答
反对 回复 2019-08-09
首页上一页12下一页尾页

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信