关于htmlcss表格单元格宽度不同设置的问题

html-css016

关于htmlcss表格单元格宽度不同设置的问题,第1张

为什么不用表格跨行列来设置?是为了符合所为“标准”,并没有CSS控制单元格的跨行和跨列,表格的跨行和跨列属于其结构,而并非其表现,所以为什么要用CSS来控制。

表格就是表格该怎么用就怎么用,就算标准的描述也是“应该避免用表格来布局” 而不是“必须避免用表格来布局” 所以有些不是CSS做的事,该怎样就怎样不用纠结。

我把你那个重写了一下:

<html>

<head>

<meta http-equiv="content-type" content="text/htmlcharset=utf-8" />

<title>form</title>

<style>

body { padding:0font-size:14pxmargin:50pxcolor:#000font-family:Arial,verdana,helvetica,sans-serif}

fieldset{ margin:0padding:0padding-bottom:20pxwidth:584pxbackground-color:#cccline-height:30pxheight:auto}

legend{ padding:0.2emmargin:0font-size:2emcolor:#fffwhite-space:preletter-spacing:-1pxtext-align:centerbackground-color:#ccc}

body,div,ul,li,label{margin:0padding:0}

body,div,fieldset{ margin:0 autotext-align:centeroverflow:auto}

#main{ float:left}

ul{ text-align:leftheight:100pxwidth:280pxoverflow:hidden}

#main li{ float:leftheight:33pxwidth:280px overflow:auto}

#main li label,#feedback label{ float:leftwidth:80pxtext-align:rightfont-size:14pxline-height:30px}

#main li input{ float:leftheight:32pxwidth:160pxline-height:28px}

#right{ float:leftfont-size:14px_margin-top:6px}

#right li{ width:300pxheight:33px}

#feedback{ clear:bothfloat:left}

textarea{ float:leftwidth:430pxclear:right}

.submit{ float:leftclear:bothwidth:580px}

#submit{ clear:bothmargin-top:10pxwidth:100pxheight:30px}

a{ margin-left:16px}

</style>

</head>

<body>

<form id="fileset" action="default.asp" method="post" class="form">

<fieldset>

<legend>提交表单</legend>

<div id="main">

<ul id="">

<li>

<label for="name">姓名:</label>

<input type="text" id="name" />

</li>

<li><label for="email">email:</label><input type="text" id="email" /></li>

<li><label for="address">网址:</label><input type="text" id="address" value="http://" /></li>

</ul>

</div>

<div id="right">

<ul id="">

<li><label>性别:</label>

<input type="radio" name="radio" id="male" /><label for="male">男</label>

<input type="radio" name="radio" id="female" /><label for="female">女</label>

</li>

<li><label>生日:</label>

<select id="year" size="1">

<option value="1">1990

<option value="2">2000

</select>

<label for="year">年</label>

<select id="month" size="1">

<option value="1">1

<option value="2">2

</select>

<label for="month">月</label>

<select id="day" size="1">

<option value="1">1

<option value="2">2

</select>

<label for="day">日</label>

</li>

<li><label>爱好:</label>

<input type="checkbox" id="basketball" /><label for="basketball">篮球</label>

<input type="checkbox" id="football" /><label for="football">足球</label>

</li>

</ul>

</div>

<div id="feedback">

<label>反馈:</label>

<textarea id="back" rows="8" cols="2" wrap="soft"></textarea>

</div>

<div class="submit">

<input type="submit" value="提 交" id="submit" /><a href="#" >取消</a>

</div>

</form>

</fieldset>

</body>

</html>

你运行一下看看