行间样式怎样给子元素设置样式？

<table style="这里写样式">
<tr>
<td></td>
<td></td>
</tr>
</table>

比如上面这种情况，我想在table中给td加边框，应该怎样设置？

行间样式：
css写在标签里面，如：

<td style="border:1px solid #ccc;"> </td>

不推荐使用，css代码跟页面内容混在一起,看起来很不整洁。

内部样式：
css写在HTML页面的<head></head>标签里面，如：

<style type="text/css">
table td{border:1px solid #ccc;}
</style>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

外部样式：
css文件单独写，在HTML的<head></head>标签中引入（最正规），如
<link rel="stylesheet" type="text/css" href="style.css" />

那就只能在td上面加边框了

可以用

<table border＝'1'>

不行，行間樣式只能針對當前元素做樣式設定，沒辦法使用選擇器

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>


    table{border-collapse: collapse;}
    table td{border:1px solid #ccc;}

这个效果吗

一般是预先写好样式

比如这样

table.border td{
    border:1px solid #ccc;
}

然后你只要给 table 元素添加一个class border 就能使 td 应用到你想要的样式了。

【热门文章】