CSS中表格单元格对齐如何设置?

html-css07

CSS中表格单元格对齐如何设置?,第1张

<!doctype html>

<html>

    <head>

<!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),tuf-8国际编码-->

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus">

<meta name="Author" content="天宝讲师">

<meta name="Keywords" content="关键词,关键字">

<meta name="Description" content="java零基础学习">

<title>java爱好者_天宝老师</title>

<!--css,js-->

<style type="text/css">

*{margin:0padding:0}

.bg{ text-align:left}

</style>

</head>

<body>

<table width="1000" border="1" class="bg">

  <tr>

    <td>java爱好者_天宝老师<td>

    <td>学java找天宝老师</td>

    <td>java零基础学习教程</td>

  </tr>

</table>

</body>

</html>

1、首先在table表格里,默认是显示两个边框线的,如果要设置成一条边框,在CSS中需要使用border-collapse设置为collapse,合并为一条边框。

2、CSS设置表格的宽度和高度,使用width宽度和height高度来设置,代码如下。

3、CSS设置表格的文本水平对齐方式。主要通过text-align来设置,有三个值:居左对齐left,居右对齐right,居中对齐center。

4、CSS设置表格的内边距。主要通过padding来设置,padding值越大,内边距越大。

5、最后设置CSS设置表格文本垂直对齐。主要通过vertical-align来设置,有三个值:顶部对齐top,居中对齐center,底部对齐bottom。

6、设置完成后,结果如下图所示。