html设置表格边框的属性(html表格在默认情况下有边框)

html怎样设置table的边框

html设置table的边框的方法是使用border?属性实现。

说明：

border 属性规定表格单元周围是否显示边框。

值 "1" 指示应该显示边框，且表格不用于布局目的。

在 HTML5 中，border 属性仅用于指示表格是否用于布局目的，且只允许属性值 "" 或 "1"。

完整用法举例：

1、html中的table代码如下：

!DOCTYPE html

html

head

meta charset="utf-8"

titletable的边框/title

/head

body

table border="1"

tr

? thMonth/th

? thSavings/th

/tr

tr

? tdJanuary/td

? td$100/td

/tr

tr

? tdFebruary/td

? td$80/td

/tr

/table

/body

/html

2、运行后的效果：

在HTML中如何设置边框?

HTML中设置边框方法：

方法/步骤

1、一个普通的表格如下：

相关设置

2、单元格边距(表格填充)(cellpadding) -- 代表单元格外面距离,用于隔开单元格与单元格之间的空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离。

具体代码如下：

table?border='1'cellspacing="0"?cellpadding="0"??tr?td?width="200"1/td?td?width="200"2/td?td?width="200"3/td?/tr?tr?tda/td?tdb/td?tdc/td?/tr?tr?td中国/td?td我/td?td爱你/td?/tr?/table

效果如图

文字不居中？

3、设置一下就好了。

代码如下：

style?type="text/css".onecenter{text-align:center;width:200px;}/styletable?border='1'cellspacing="0"?cellpadding="0"??tr?td?class='onecenter'1/td?td?class='onecenter'2/td?td?class='onecenter'3/td?/tr?tr?td?class='onecenter'a/td?td?class='onecenter'?b/td?td?class='onecenter'??c/td?/tr??tr?td?class='onecenter'?中国/td?td?class='onecenter'?我/td?td?class='onecenter'?爱你/td?/tr?/table

4、为了方便一点我直接把样式写在上面了。

效果如图：

5、每一个表格都是一个完整的方框，如果想要线条更细。

6、看如下代码：

style?type="text/css".onecentertext-align:center;width:200px;height:50px;}#sebackground-color:#006699?;padding:20px;color:#FFF;}/styletable?border='1'cellspacing="0"?cellpadding="20"??tr?td?class='onecenter'1/td?td?class='onecenter'?style='border-left:0px;border-right:0px;'??2/td?td?class='onecenter'3/td?/tr?tr?td?class='onecenter'a/td?td?class='onecenter'?style='border:0px'?b/td?td?class='onecenter'??c/td?/tr??tr?id='se'?td?class='onecenter'?中国/td?td?class='onecenter'?我/td?td?class='onecenter'?爱你/td?/tr?/table

7、这段代码主要是针对某些表格做了些设置，让某些表格不显示出来。

怎么设置HTML表格细边框

一般用表格的时候总会给它个border属性，比如：table border="1"，其效果如下：

可以发现表格的边框好像很宽，当然这里的“很宽”绝对不是表格border的宽，会看到的宽应该是td之间有间隙所致。因此只需 要修改表格的cellspacing属性即可，即：table border="1px" cellspacing="0px"，效果如下：

但是，这个宽度只有一个像素的宽，其实，上图看到的其实是两个像素的宽，为什么呢，这是因为td之间的边框没有重合所致。修改表格的border-collapse属性即可，

即table border="1px" cellspacing="0px" style="border-collapse:collapse"

再给表格加个颜色：

table border="1px" bordercolor="#000000"?cellspacing="0px" style="border-collapse:collapse"

怎么用CSS设置html中的表格边框样式

border 在一个声明中设置所有的边框属性。 1

border-bottom 在一个声明中设置所有的下边框属性。 1

border-bottom-color 设置下边框的颜色。 2

border-bottom-style 设置下边框的样式。 2

border-bottom-width 设置下边框的宽度。 1

border-color 设置四条边框的颜色。 1

border-left 在一个声明中设置所有的左边框属性。 1

border-left-color 设置左边框的颜色。 2

border-left-style 设置左边框的样式。 2

border-left-width 设置左边框的宽度。 1

border-right 在一个声明中设置所有的右边框属性。 1

border-right-color 设置右边框的颜色。 2

border-right-style 设置右边框的样式。 2

border-right-width 设置右边框的宽度。 1

border-style 设置四条边框的样式。 1

border-top 在一个声明中设置所有的上边框属性。 1

border-top-color 设置上边框的颜色。 2

border-top-style 设置上边框的样式。 2

border-top-width 设置上边框的宽度。 1

border-width 设置四条边框的宽度。 1

outline 在一个声明中设置所有的轮廓属性。 2

outline-color 设置轮廓的颜色。 2

outline-style 设置轮廓的样式。 2

outline-width 设置轮廓的宽度。

html表格属性

这是html表格标记table的属性， border="1" 是让表格边框线的粗细为1像素，cellpadding="0" 是让单元格边框线与单元格中的内容之间的距离为0像素，即单元格中内容紧挨着单元格的边线， cellspacing="0" 是让各单元格之间的缝隙为0象素。 如table width="200" border="1" cellpadding="0" cellspacing="0" 表示这个表格宽度为200象素，边框粗细为1象素，单元格和格中的内容距离为0象素，单元格之间的距离为0象素，画出的表格看起来是一个单线的表格。

tr是表中的行，td是表中的单元格，还有一个是th是表格的表头例如：table width=778 border=0trtd/tdtd/td

colspan是列合并

rowspan是行合并

后面是是合并的数量

HTML中表格属性有哪些？

table?width="800"?border="0"?align="center"?cellpadding="0"?

cellspacing="0"

该标记标示表格的开始，该表格宽度为800像素，边框粗细为0(?即不显示边框?)，对齐方式"水平居中"，单元格边距"0"，单元格间距"0"。

表格属性的设置及相关说明：

border:?用于设置表格边框的粗细，属性值为数值，数值越大，框线越粗，如果设置border="0"，则表示不显示表格框线

background:?用于设置表格的背景图片，属性值为URL(?图片所在路径及图片文件的文件名?)

例：

table?background="URL"??????!--设置表格背景图片--

cellspacing:?用于设置表格内框线宽度(?即单元格间距?)，属性值为数值(?单位为像素?)，数值越大，单元格间距越大，若未设置，默认值为2

例：

table?cellspacing="1"???????!--设置表格中单元格间距为1--

cellpadding:?用于设置表格内文字与表格框线之间的间距(?单元格边距?)，属性值为数值(?单位为像素?)，数值越大，表格内文字与表格框线的间距越大，该属性的设置值必须是大于或等于0的正整数值，若未设置，默认值为1

例：

table?cellpadding="0"???????!--设置表格中单元格边距为0--

width:?用于设置表格的宽度(?也可用于设置单元格td或th宽度?)，属性值可以是数值(?单位为像素?)，也可以是百分比(?相对于父级目标的比例值?)，数值越大，表示宽度越大(?注:?设置width属性时，可以先设置表格的宽度，再依次设置各单元格的宽度，也可以不设置表格的宽度，仅设置表格中各单元格的宽度?)

例：

table?width="100"????????????!--设置表格宽度为100像素--

td?width="20%"???????????????!--设置单元格宽度为所在表格宽度的20%--

height:?用于设置表格的高度(?也可用于设置单元格td或th高度?)，属性值可以是数值(?单位为像素?)，也可以是百分比(?相对于父级目标的比例值?)，数值越大，表示高度越大(?注:?设置height属性时，可以先设置表格的高度，再依次设置各单元格的高度，也可以不设置表格的宽度，仅设置表格中各单元格的高度?)

例：

td?height="30"???????????????!--设置单元格高度为30像素--

bgcolor:?用于设置表格或单元格或表格中的行或列的背景颜色，属性值可以使用颜色名称，或使用三原色混色值

例：

table?bgcolor="blue"?????????!--设置表格背景颜色为蓝色--

td?bgcolor="black"???????????!--设置单元格背景颜色为黑色--

align:?用于设置表格或单元格的对齐方式。在table标记中设置align属性用于设置表格的对齐方式，包括:?center(?表格居中对齐?)，left(?表格左对齐，默认值?)，right(?表格右对齐?)。在行tr或单元格td或th标记中设置align属性用于设置单元格内文字的对齐方式，包括:?center(?单元格内文字居中对齐?)，left(?单元格内文字左对齐，默认值?)，right(?单元格内文字右对齐?)

valign:?用于设置单元格内文字垂直对齐方式，包括:?top(?单元格内文字顶端对齐?)，middle(?单元格内文字垂直居中对齐，默认值?)，bottom(?单元格内文字底端对齐?)

tr

表格中的行标记，tr即table?row的缩写，tr标记为成对标记，用于设置表格中一行的开始和结束及该行的相关属性，表格中有多少行，则该表格的table…/table标记内就有多少对tr…/tr标记与之对应。

例：

tr?valign="top"

该标记标示行的开始，垂直对齐方式"顶端对齐"(?默认为垂直居中对齐?)。

tr标记中的水平对齐属性：align="left"(?左对齐?);?align="center"(?居中?);?align="right"(?右对齐?)。

tr标记中的垂直对齐属性：valign="top"(?顶端?);?valign="middle"(?居中?);?valign="bottom"(?靠下?)。

td

表格中的字段(?列?)数据标记，td即table?Data的缩写，td标记为成对标记，用于设置字段数据的开始和结束及字段的相关属性，表格中有多少列，则该表格的table…/table标记内就有多少对td…/td标记与之对应。

例：

td?width="50%"

该标记标示一个单元格的开始，该单元格宽度设置为父级目标宽度的50%。

th

表格中列标题(?字段名?)定义标记，th是Table?Header的缩写，th标记为成对标记，用于设置表格的表头名称(?字段名?)，该标记内文字的对齐方式为水平居中且垂直居中，字体加粗。也可以在该标记内使用align和valign设置该字段内的对齐方式，其设置值的有效范围只限于该数据。在tr标记内，align和valign对该行中的所有字段均有效。

border

table标记中的属性之一，用于设置表格边框的粗细。Border属性值可用数值表示，其值为0或省略此项设置表示不显示边框，数值越大表示框线越粗。