`
ghyghoo8
  • 浏览: 193113 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

<table>表格边框的控制

阅读更多
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解。

一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下:
ID NAME GENDER
1001 mike male

可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格border的宽,大家看到的宽应该是<td>之间有间隙所致。因此只需要修改表格的cellspacing属性即可,即:<table border="1px" cellspacing="0px">,效果如下:
ID NAME GENDER
1001 mike male

但是,好像宽度还是没有我们想象的那样:只有一个像素的宽,其实,上图大家看到的其实是两个像素的宽,为什么呢,这是因为<td>之间的边框没有重合所致。修改表格的border-collapse属性即可,

即<table border="1px" cellspacing="0px" style="border-collapse:collapse">
ID NAME GENDER
1001 mike male

再给表格加个颜色,<table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">
ID NAME GENDER
1001 mike male
分享到:
评论

相关推荐

    漂亮的网页 模版 完全利用完成的

    `&lt;table&gt;`元素原本是用来展示数据的,如表格数据,但后来被开发者用来进行页面的定位和布局,尽管这不是它的原设计目的。 在描述中提到的“完全利用`&lt;table&gt;`完成的整个网页的布局”,意味着这个网页的所有部分,...

    table标签使用方法

    通过本文的学习,你应该能够熟练掌握`table`标签的基本用法以及如何使用`colspan`和`rowspan`属性来合并单元格,同时也了解了如何使用`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`标签来增强表格的语义性和可访问性。...

    html中table的表格样式

    表格还可以通过`&lt;colgroup&gt;`和`&lt;col&gt;`标签对列进行样式控制,或者通过`&lt;tbody&gt;`、`&lt;tfoot&gt;`和`&lt;thead&gt;`分别定义表格主体、页脚和头部。 对于复杂的表格布局,可以使用`&lt;tr&gt;`、`&lt;td&gt;`的`colspan`和`rowspan`属性来...

    DL-Dt-DD(做表格Css实现)

    传统的HTML表格元素如`&lt;table&gt;`, `&lt;tr&gt;`, `&lt;td&gt;`等可以方便地组织和显示结构化数据,但在某些场景下,为了追求更灵活的样式控制和更好的语义化,开发者可能会选择非传统的方法,比如使用`&lt;dl&gt;`, `&lt;dt&gt;`, `&lt;dd&gt;`元素...

    table表格知识.pdf

    `&lt;table&gt;`是表格的容器,`&lt;tr&gt;`定义表格的行,`&lt;th&gt;`用于创建表头单元格,而`&lt;td&gt;`则用来填充数据单元格。例如,一个3行3列的表格可以通过以下代码创建: ```html &lt;table&gt; &lt;tr&gt; &lt;th&gt;列1&lt;/th&gt; &lt;th&gt;列2&lt;/th&gt; &lt;th&gt;...

    Dreamweaver制作细边框表格

    以下是一个使用CSS来控制表格边框的例子: ```html &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;CSS样式表格&lt;/title&gt; &lt;style ...

    用table做网页

    例如,可以设置表格边框、颜色、对齐方式等。以下是一些常见的CSS样式: ```css table { border-collapse: collapse; /* 合并边框 */ width: 100%; /* 设置表格宽度 */ } th, td { border: 1px solid #ddd; /* ...

    table示例代码

    在`&lt;table&gt;`中,我们可以使用一些属性来控制表格的外观和行为: 1. `border`:设置表格边框的宽度,例如`border="1"`将显示边框。 2. `cellpadding`:设置单元格内部与内容之间的距离。 3. `cellspacing`:设置...

    table嵌套table边框样式

    /* 清除内层表格边框 */ } ``` 当涉及到`div嵌套table`的外边框时,由于div默认没有边框,我们需额外设置`div`的样式: ```css div.container { border: 1px solid #black; display: inline-block; /* 或者使用...

    表格 html 表格 html 表格 html

    表格在整个网页中的对齐方式可以通过`&lt;table&gt;`标签的`align`属性来设定,如`align="center"`可以让表格居中显示。 **示例**: ```html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;表格在网页中对齐&lt;/title&gt; &lt;/head&gt; ...

    2022年HTML相关知识点表格标签(1).pptx

    `bordercolor` 属性用于设置表格边框的颜色,例如 `&lt;table bordercolor="#000000"&gt;` 表示表格的边框颜色为黑色。 `width` 属性用于设置表格的宽度,例如 `&lt;table width="500"&gt;` 表示表格的宽度为 500 像素点。 `...

    HTML表格.docx

    表格的边框默认情况下是不显示的,可以通过设置`&lt;table&gt;`标签的`border`属性来开启边框,例如`border="1"`会显示1像素的边框。如: ```html &lt;table border="1"&gt; &lt;tr&gt; &lt;td&gt;SEO, SEM&lt;/td&gt; &lt;td&gt;网络营销, 网站技术...

    table只显示横行、枞行

    1. **`&lt;table&gt;`**:定义表格的基本结构。 2. **`&lt;tr&gt;`**:定义表格中的行。 3. **`&lt;td&gt;`**:定义表格中的单元格。 4. **`&lt;colgroup&gt;`**:定义表格中的一组列,常用于设置整列的样式。 5. **`rules`属性**:规定表格...

    网页设计-表格.ppt

    `&lt;table&gt;`标签定义了整个表格,可以通过属性来设置表格的样式,例如`border`属性用于设定表格边框的宽度。 6.3 表格行的控制 `&lt;tr&gt;`标签定义表格的一行,可以包含多个`&lt;td&gt;`或`&lt;th&gt;`单元格。通过增加`&lt;tr&gt;`标签,...

    HTML.zip_Table

    接下来,我们可以深入探讨一些`&lt;table&gt;`的属性,它们用于控制表格的外观和行为: 1. `border`: 设置表格边框的宽度,例如`border="1"`将创建一个单像素边框。 2. `cellpadding`: 定义单元格内容与边框之间的距离。 ...

    Html中用table画斜线

    一个简单的表格由`&lt;table&gt;`标签开始,包含若干行`&lt;tr&gt;`(表格行)和列`&lt;td&gt;`(表格数据单元格)。例如: ```html &lt;table&gt; &lt;tr&gt; &lt;td&gt;内容1&lt;/td&gt; &lt;td&gt;内容2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;内容3&lt;/td&gt; &lt;td&gt;内容4&lt;/td&gt; ...

    第6章 表格元素.pdf

    通过在&lt;table&gt;元素中使用border属性,可以为表格添加边框。 示例代码如下: ```html &lt;table border="1"&gt; &lt;tr&gt; &lt;td&gt;张三&lt;/td&gt; &lt;td&gt;男&lt;/td&gt; &lt;td&gt;未婚&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;李四&lt;/td&gt; &lt;td&gt;女&lt;/td&gt; &lt;td&gt;已婚...

    HTML中表格的制作

    通过设置`border`、`background-color`、`color`等属性,可以调整表格边框、背景色和文字颜色。例如,给表格添加边框: ```css table { border-collapse: collapse; /* 合并边框 */ border: 1px solid black; } ...

    使用HTML开发商业网站-创建表格课件.pptx

    在这个例子中,`&lt;table border="1"&gt;`设置边框为1,使得表格有明显的边界。`&lt;tr&gt;`元素定义了表格的行,每行内的`&lt;td&gt;`元素则表示单元格,分别填充了品牌、型号和颜色的数据。 表格还可以包含表头,表头单元格`&lt;th&gt;`...

    html语言课程

    - 结合`&lt;thead&gt;`、`&lt;tbody&gt;`、`&lt;tfoot&gt;`与`&lt;colgroup&gt;`可以更精细地控制表格布局。 **7.7 表格的标题标签 `&lt;caption&gt;`** - `&lt;caption&gt;`标签用于定义表格标题。 **7.8 表格的嵌套** - 表格可以在其他表格内部...

Global site tag (gtag.js) - Google Analytics