CSS做表格,但表格内文字不知该如何靠左?! (内附程式码)

html-css015

CSS做表格,但表格内文字不知该如何靠左?! (内附程式码),第1张

<style>

th, td {border:1px solid #aaa}

table {border-collapse:collapse}

</style>

<table>

<tr><td>学号</td><td>101407117</td><td>相片</td></tr>

<tr><td>姓名</td><td>张葵花</td><td rowspan="6"><IMG SRC="C:\Users\Jenny\Desktop

\101407117_张葵花_作业2\me.jpg" ALT="me"></td></tr>

<tr><td>出生日期</td><td>83年8月1日</td>

<tr><td>籍贯</td><td>台湾省</td>

<tr><td>学历</td><td>圣约翰科技大学 资讯管理系</td>

<tr><td>喜好</td><td>上网、听音乐、看电影 </td>

<tr><td>兴趣</td><td>追星</td>

</table>

其实表格默认就是左对齐的

你的代码无法左对齐是因为每个单元格中的内容前后有空格导致的,把空格删除即可

图片那个在td中加入rowspan="6"(合并6行)就可以了

在css里text-align:left是让文字左对齐的

导航文字在IE6中靠左对齐,代码如何:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>导航条文字靠左</title>

<style type="text/css">

body,ul,li{margin:0 padding:0 font-size:14px list-style:none font-family:Verdana, Geneva, sans-serif}

a{color:#000 text-decoration:none}

a:hover{color:#fff}

.header{width:980px margin:0 auto}

ul.nav{height:35px line-height:35px overflow:hidden border-left:1px #999 solid}

ul.nav li{width:100px text-align:left border-right:1px #999 solid float:left}

ul.nav li a{display:block background-color:#ccc padding-left:10px}

ul.nav li a:hover{background-color:#069}

</style>

</head>

<body>

<div class="header">

     <ul class="nav">

         <li><a href="#">首页</a></li>

            <li><a href="#">关于我们</a></li>

            <li><a href="#">产品中心</a></li>

            <li><a href="#">案例展示</a></li>

            <li><a href="#">服务支持</a></li>

            <li><a href="#">解决方案</a></li>

            <li><a href="#">联系我们</a></li>

        </ul>

    </div>

</body>

</html>

希望能帮到你。

方法如下:

一、行高(line-height)法

如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:

p

{

height:30px

line-height:30px

width:100px

overflow:hidden

}

这段代码可以达到效果。

二、内边距(padding)法

另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:

p

{

padding:30px

}