看一下
<style type="text/css">
table { border-collapse:collapsetext-align:centervertical-align:middle}
table tr{ height:25px}
table td{ width:100px}
.bg1{ background:#ccc}
table tr:hover{ background:#09C}
.bg2{ background:#999}
.t1,.t2,.t3,.t4,.b1,.b2,.b3,.b4,.tab{ display:blockoverflow:hidden}
.t1,.t2,.t3,.b1,.b2,.b3{ height:1px}
.t2,.t3,.t4,.b2,.b3,.b4,.tab{ border-left:2px solid #f6fborder-right:2px solid #f6f}
.t1,.b1{ margin:0 5pxbackground: #F6F}
.t2,.b2{ margin:0 3pxborder-width:2px}
.t3,.b3{ margin:0 2px}
.t4,.b4{ height:2pxmargin:0 1px}
.tab{ height:130pxbackground:#F7F8F9}
.tab_width{ width:700pxmargin:0 autocursor:pointer}
</style>
<div class="tab_width">
<b class="t1"></b><b class="t2"></b><b class="t3"></b><b class="t4"></b>
<div class="tab">
<table>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr class="bg1">
<td>国学</td>
<td>数学</td>
<td>英语</td>
<td>多媒体</td>
<td>体育</td>
<td>毛概</td>
<td>实验</td>
</tr>
<tr class="bg2">
<td>国学</td>
<td>数学</td>
<td>英语</td>
<td>多媒体</td>
<td>体育</td>
<td>毛概</td>
<td>实验</td>
</tr>
<tr class="bg1">
<td>国学</td>
<td>数学</td>
<td>英语</td>
<td>多媒体</td>
<td>体育</td>
<td>毛概</td>
<td>实验</td>
</tr>
<tr class="bg2">
<td>国学</td>
<td>数学</td>
<td>英语</td>
<td>多媒体</td>
<td>体育</td>
<td>毛概</td>
<td>实验</td>
</tr>
</table>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
提问者评价
谢谢了···
1中怎么样将表格居中显示需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index，填充问题基础代码。
2、在index中的<style>；标签中，输入css代码：table {margin: auto}。
3、浏览器运行index页面，此时table在div中成功居中显示了。
2.HTML中怎么用列表框
HTML中下拉列表框是一个可选列表。
该列表的组成需要有select 以及其中的选项option组成。一个select中可以包含多个选项（option），每个option有一个value属性表示这个option的值，展示文本这对标签中间的“展示文本”是用于在下拉的时候展示的选项，其中的某一个option在选中以后，这个option的value就可以用于和后台交互进行逻辑处理。
以下是一个最简单的DEMO: 列表框演示<body>。
你好！
<style>table {
font-family: arial, 宋体, sans-serif
border-spacing: 0
border-collapse: collapse
}
tbody {
display: table-row-group
vertical-align: middle
border-color: inherit
}
td,
th {
display: table-cell
vertical-align: inherit
}
table th,
table td {
padding: 2px 10px
font-size: 12px
line-height: 22px
height: 22px
border: 1px solid #e6e6e6
}
table th {
border-bottom: 1px solid #e6e6e6
text-align: left
font-weight: 700
height: 23px
background-color: #f8f8f8
}
table.table-view {
margin: 5px 0
border-collapse: collapse
word-wrap: break-word
word-break: break-all
font-size: 12px
line-height: 22px
color: #000
}
caption {
display: table-caption
text-align: -webkit-center
}
table caption {
font-weight: 700
padding: 10px 0
padding: 8px 0 9px
font-size: 14px
}
table a {
color: #136ec2
text-decoration: none
}
</style> <table log-set-param="table_view" class="table-view log-set-param">
<caption>金满贯</caption>
<tbody>
<tr>
<th height="0" align="left">
<div class="para" label-module="para">网球奖项</div>
<div class="para" label-module="para">（英文）</div>
</th>
<th height="0" align="left">
<div class="para" label-module="para">网球奖项</div>
<div class="para" label-module="para">（中文）</div>
</th>
<th>分类</th>
<th height="0" align="left">信息</th>
</tr>
<tr>
<td width="100" height="0" align="left" valign="center" rowspan="2"><b>Golden Slam</b></td>
<td width="87" height="0" align="left" valign="center" rowspan="2">
<div class="para" label-module="para"><a target="_blank" href="/item/%E9%87%91%E6%BB%A1%E8%B4%AF"><b>金满贯</b></a></div>
<div class="para" label-module="para"><b>★★★★</b></div>
</td>
<td width="91" align="left" valign="center">年度金满贯</td>
<td valign="top" align="left" width="354">
<div class="para" label-module="para">（年度金满贯：是指一位选手在一个赛季里（一年）同时获得所有四大满贯赛事的冠军和<a target="_blank" href="/item/%E5%A4%8F%E5%AD%A3%E5%A5%A5%E6%9E%97%E5%8C%B9%E5%85%8B%E8%BF%90%E5%8A%A8%E4%BC%9A">夏季奥林匹克运动会</a>网球项目金牌。）</div>
</td>
</tr>
<tr>
<td width="91" align="left" valign="center">职业金满贯</td>
<td width="354" align="left" valign="center">（职业金满贯：是指一位选手在职业生涯中非连续夺得所有四大满贯赛事的冠军和<a target="_blank" href="/item/%E5%A4%8F%E5%AD%A3%E5%A5%A5%E6%9E%97%E5%8C%B9%E5%85%8B%E8%BF%90%E5%8A%A8%E4%BC%9A">夏季奥林匹克运动会</a>网球项目金牌。）</td>
</tr>
</tbody>
</table>
希望对你有帮助！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）