html表格内外边框颜色_前端开发入门之——表格基本结构

表格在网页制作中作用很多，表格的使用不仅让数据更加清楚，而且会让表格比较美观，那么html表格基本结构是什么呢？接下来，我们对html表格的完整代码进行详解。

表格是什么呢？

表格由< table>标签来定义。每个表格均有若干行（由< tr>标签定义），每行被分割为若干单元格（由< td>标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包括文本、图片、列表、段落、表单、水平线、表格等等。

HTML表格基本结构是什么？

表格最基本的标签就是一些属性，比如table标签和tr标签和td标签，其中table标签是包含< tr>和< td>

< table>标记

基本格式为< table 属性1=“属性1” 属性2=“属性2”......>表格内容< /table>

< table>b标记的属性分别是什么呢？

width属性：表示表格的宽度，他的值可以是像素（px）也可以是父级元素的百分比(%)

height属性：表示表格的高度，他的值可以是像素（px）也可以是父级元素的百分比(%)

border属性：表示表格外边框的宽度

aligh属性：表格的显示位置

值：1.left居左显示2.center居中显示3.right居右显示 默认值为left

cellspacing属性：单元格之间的间距，默认是2px，单位像素

cellpadding属性：单元格内容与单元格边框的显示距离，单位像素

frame像素

frame像素就是用来控制表格边框最外层的四条线框

属性值：

void（默认值）：表示无边框

above:表示仅顶部有边框

below：表示仅有底部边框

hsides:表示仅有顶部边框和底部边框

lhs:表示仅有左侧边框

rhs:表示仅有右侧边框

vsides:表示仅有左右侧边框

box:包含全部4个边框

border:包含全部4个边框

rules属性

rules属性用来控制是否显示以及如何显示单元格之间的分割线

属性值：

none（属性值）:表示无分割线

all:表示包括所有分割线

rows：表示仅有行分割线

close：表示仅有列分割线

groups：表示仅有行组和列祖之间有分割线

< caption>标记

这个标记是在表格需要标题的时候使用，< caption>属性的插入位置，直接位于< table>属性之后，< tr>表格行之前

align属性

top:标题放在表格的上部

bottom：标题放在表格的下部

left：标题放在表格的左部

right：标题放在表格的右部

< tr>标记

定义表格的一行，对于每一个表格行，都是由一对< tr>...< /tr>标记表示，每一行< tr>标记内可以嵌套多个< td>或者< tr>标记

bgcolor属性：设置背景颜色 格式：bgcolor="颜色值"

align属性：设置垂直方向对齐方式 格式：align=”值“ 、

值：

bottom：靠顶端对齐

top：靠底部对齐

middle：居中对齐

valign属性：设置水平方向对齐方式 格式为valign="值"

值：

left：靠左对齐

right：靠右对齐

center：居中对齐

< td>和< th>

< td>和< th>都是单元格的标记，其必须嵌套在< tr>标签内，是成对出现

< td>和< th>两者之间的区别是什么呢？

1.< th>是表头标记，通常位于首行或者首列，< th>中的文字默认会被加粗，而< td>不会

2.< td>是数据标记，表示该单元格的具体数据

< td>和< th>两者之间的共同之处为：两者标记属性都是一样的

属性

bgcolor:设置单元格背景

align:设置单元格对齐方式

valign:设置单元格垂直对齐方式

width：设置单元格宽度

height:设置单元格高度

rowspan:设置单元格所占行数

colspan：设置单元格所占列数

（ps:如果您觉得有用，请点赞转发，让更多人看到哦）