细线表格用到的核心 CSS 规则是什么?

html-css011

细线表格用到的核心 CSS 规则是什么?,第1张

可以为表格标签定义宽,高和边框样式,并为单元格单独设置相应的边框。

如果只设置table样式,则只显示外边框的样式,内部不显示边框。

要想设置相邻单元格边框之间的距离,只能对table标签应用属性。

可以通过设置单元格元素td的边框样式来实现:

border: width style color  /*分别设置边框的粗细、样式和颜色*/

示例如下:

在HTML代码中给出两个表格

<table class="tb1">

<tr><td>有</td><td>志</td><td>者</td></tr>

<tr><td>事</td><td>竟</td><td>成</td></tr>

</table>

<table class="tb2">

<tr><td>苦</td><td>心</td><td>人</td></tr>

<tr><td>天</td><td>不</td><td>负</td></tr>

</table>

分别设置不同的样式

table{ /* 表格整体样式 */

margin:50px  /* 外边距50px */

border-collapse:collapse /* 合并为单一的边框线 */

}

/* 设置tb1类的表格样式 */

table.tb1 td{padding:10pxborder:1px solid green}

/* 设置tb2类的表格样式 */

table.tb2 td{padding:20pxborder:5px dashed blue}

最终效果如下

您好!以下是最典型的细线表格,具备最基本的设置。供参考:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>表格CSS设置</title>

<style>

#tb1 {

    border-collapse: collapse /* 折叠边框产生细线表格*/

    border: 2px solid black   /* 外框粗线、内部细线表格,表格线为黑色 */

}

#tb2 {

    border-collapse: collapse /* 折叠边框产生细线表格*/

    border: 1px solid red     /* 细线表格,表格线为红色 */

}

</style>

</head>

<body>

<br>

<table id="tb1" width="379" height="87" border="1" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td width="123" height="34">&nbsp</td>

      <td width="122">&nbsp</td>

      <td width="126">&nbsp</td>

    </tr>

    <tr>

      <td height="25">&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

    <tr>

      <td>&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

  </tbody>

</table>

<br>

<table id="tb2" width="379" height="89" border="1" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td width="123" height="36">&nbsp</td>

      <td width="122">&nbsp</td>

      <td width="126">&nbsp</td>

    </tr>

    <tr>

      <td height="25">&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

    <tr>

      <td>&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

  </tbody>

</table>

</body>

</html>

显示结果: