html属性总结

基本语法

<table border=1>

<caption>我是一个表格的标题caption>
<tr>
<th>这是一个表头th>
<th>这是另一个表头th>
tr>

<tr>
<td>这是一列td>
<td>这是另一列td>
tr>

<tr>
<td> td>
<td>这是一列td>
tr>
table>
我是一个表格的标题
这是一个表头 这是另一个表头
这是一列 这是另一列
  这是一列



1. 一个简单表格的基本标签

...
表格的基本框架
...表格的标题
表格的一行
表格的一列
表格的表头
2. 表格内容为空,不显示边框时,加入 

标签属性

标签属性

-border 表格的边框宽度(border不支持pixels单位)
-cellpadding 表格内容和边缘的空白
-cellspacing 单元格和单元格之间的空白
-frame 规定围绕表格的哪些边框是可见的(建议CSS替代,浏览器支持弱)

描述
void 不显示外框
box 显示所有外框
above 上部
below 下部
lhs 左部
rhs 右部
hsides 上下部
vsides 左右部

-rules 规定内侧哪些边框是可见的

描述
none 不显示内框线条
all 显示所有内框线条
rows 行有线条
cols 列有线条
groups 显示行组合列组之间的线条(首先要有行组和列组)

-width 规定表格的宽度
-summary 表格摘要,w3school不明确支持浏览器 X
-align和bgcolor 建议用CSS替代 X

标签属性

-align 略

标签属性和 标签属性

-align 略
-colspan 横跨的列数
-rowspan 横跨的列数
-valign 垂直对齐

描述
top 上对齐
middle 居中对齐
bottom 下对齐
baseline 基线对齐

-height 建议用CSS替代 X
-width 建议用CSS替代 X
-bgcolor 建议用CSS替代 X
-nowrap 是否折行 建议用CSS替代 X

标签属性

-align 略
-bgcolor 略
-valign 略

标签属性

-align 略
-valign 略

为表格的列分组
经测试在safari下这两个标签是无效的,w3school建议用css替代

用法

表格合并案例

colspan列合并

<table border=1>
<caption>这是一个电话本caption>
<tr>
<th>姓名th>
<th colspan=2>电话th>
tr>
<tr>
<td>老王td>
<td colspan=2>151111222222td>
tr>
table>
这是一个电话本
姓名 电话
老王 151111222222


rowspan行合并

<table border=1>
<caption>这是一个电话本caption>
<tr>
<th>姓名th>
<td>老王
tr>
<tr>
<th rowspan=2>电话th>
<td>152222222222td>
tr>
<tr>
<td>151111111111td>
tr>
table>
这是一个电话本
姓名 老王
电话 152222222222
151111111111

表格标签嵌套案例

在表格中包含段落

<table border=1>
<caption>在表格中包含标题和段落caption>
<tr>
<td>
<p>我是一个段落p>
<p>我是另一个段落p>
td>
tr>
table>
在表格中包含标题和段落

我是一个段落

我是另一个段落

在表格中包含表格

<table border=2>
<caption>在表格中包含表格capton>
<tr>
<td>
     <table border=1>
     <tr>
     <td>表格嵌套td>
     <td>表格嵌套td>
     tr>
     <tr>
     <td>表格嵌套td>
     <td>表格嵌套td>
     tr>
     <table>
td>
tr>
table>
在表格中包含表格
表格嵌套 表格嵌套
表格嵌套 表格嵌套

包含一个无序列表的表格

<table border=1>
    <tr>
    <td>
    <ul>
    <li>苹果li>
    <li>橘子li>
    <li>香蕉li>
    td>
    tr>
    table>
  • 苹果
  • 橘子
  • 香蕉
##带有``标签的表格##
<table border=1>
<caption>我是一个表格的标题caption>

<thead>
<tr>
<th>这是一个表头th>
<th>这是另一个表头th>
tr>
thead>

<tbody>
<tr>
<td>这是一列td>
<td>这是另一列td>
tr>
tbody>

<tfoot>
<tr>
<td> td>
<td>这是一列td>
tr>
tfoot>

table>
我是一个表格的标题
这是一个表头 这是另一个表头
这是一列 这是另一列
  这是一列

你可能感兴趣的:(html,html)