分离表中的元素

时间:2014-09-20 05:48:29

标签: html css html5

我正在尝试制作手机网站列表,这是实际问题,看看这里的截图是代码太thml和css文件<th>必须用边框分隔这是图片:{{ 0}}

代码:

<html>
    <head>
        <title>Mobile phones</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <h1>eMobile</h1>

    <div id="wid">
        <input type="text" name="manuf" value="დასახელება"></br>
        <select>
            <option value="none">მწარმოებელი</option>
            <option value="nokia">Nokia</option>
            <option value="mercedes">Samsung</option>
            <option value="sony">Sony</option>
        </select> </br>
     ფილტრაცია ფასით</br>
    დან:<input type="number" name="from" value="0"> მდე:<input type="number" name="to_the" value="99999">
        <input type="submit" value="Submit">
    </div>
    <table>
        <tr>
            <th><img src="2058.jpg"> </br>  <h5>Lumia 1520 Black</h5></th>
            <th><img src="2058.jpg"> </br>  <h5>Lumia 1520 Black</h5></th>
        </tr>
    </table>        
</html>

CSS

body {
    background-color: #66CCFF
}
h1 {
    color: black;
    border-bottom:solid #2A1959;
    position:relative;
    top:30px;
}
select {
    width:173px;
}
tr,td {
    height=300px;
    width=200px;
    border:2px solid black;
    position: absolute;
    top: 20px;
    left: 30px;
    colspan="0"
}      
table {
    height:500px;
    width:800px;
    border:3px solid black;
    position: absolute;
    top: 130px;
    left: 330px;
    z-index: -1;
}      
#wid {
    width: 200px;
    height: 600px;
    border-right:solid #2A1959;
    position: relative;
    top: 50px;
    left: 50px;
}
#wid div {
    position: relative;
    top: 500px;
    left: 100px;
}

2 个答案:

答案 0 :(得分:1)

使用border分隔th

th {
font-weight: bold;
border: 2px solid #000;
}

Demo

答案 1 :(得分:1)

删除tr border属性并为th,td:

设置边框
th ,td {
border: 3px solid black;
}

jsfiddle demo