table常见属性一

用爱好推动文明进步
255 阅读1分钟

table中的属性有哪些

1.width="表格的宽度"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="300px">
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
        </tr>
    </table>
</body>
</html>

image.png

2.height="表格的高度"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
    <table border="1" width="300px" height="300px">
        <tr>
                <td>Header 1</td>
                <td>Header 2</td>
        </tr>
    </table>
</body>

</html>

image.png

3.border="表格的边框"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="3" width="300px" height="300px">
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
        </tr>
    </table>
</body>
</html>

image.png

4.bordercolor="边框色"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<table border="3" width="300px" height="300px" bordercolor="red">
		<tr>
			<td>Header 1</td>
			<td>Header 2</td>
		</tr>
	</table>
</body>
</html>

image.png

5.cellspacing="单元格与单元格之间的间距"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<table border="3" width="300px" height="300px" bordercolor="red" cellspacing="10px">
		<tr>
			<td>Header 1</td>
			<td>Header 2</td>
		</tr>
	</table>
</body>
</html>

image.png

6.cellpadding=“单元格与内容之间的距离"

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <table border="3" width="300px" height="300px" bordercolor="red" cellspacing="10px" cellpadding="20px">
      <tr>
        <td>Header 1</td>
        <td>Header 2</td>
      </tr>
    </table>
  </body>
  </html>

image.png

7.align,valign对齐方式

7.1 align="表格水平对齐方式"

取值：left、right、center、

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="3" width="500px" height="100px" bordercolor="red" align="center">
    <tr>
      <td>Header 1</td>
      <td>Header 2</td>
    </tr>
  </table>
</body>

</html>

image.png

7.2 valign=“垂直对齐”

取值：top\bottom\middle

值得注意的是valign是用于td标签的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="1" height="280px">
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td valign="top">January</td>
      <td valign="top">$100</td>
    </tr>
    <tr>
      <td valign="bottom">February</td>
      <td valign="bottom">$80</td>
    </tr>
  </table>
</body>

</html>

image.png

8.合并单元格属性：(td)

8.1 colspan合并列：

colspan=“所要合并的单元格的列数"

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="1">
    <tr>
      <th>Name</th>
      <th colspan="2">Telephone</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
    </tr>
  </table>
</body>

</html>

image.png

8.2 rowspan合并行

合并行： rowspan=“所要合并单元格的行数”

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="1">
    <table border="1">
      <tr>
        <th>First Name:</th>
        <td>Bill Gates</td>
      </tr>
      <tr>
        <th rowspan="2">Telephone:</th>
        <td>555 77 854</td>
      </tr>
      <tr>
        <td>555 77 855</td>
      </tr>
    </table>
</body>

</html>

image.png

table中的标签

table定义表格
th定义表格的表头
tr定义表格的行
td定义表格单元
caption定义表格标题
colgroup定义表格列的组
col定义用于表格列的属性
thead定义表格的页眉
tbody定义表格的主体
tfoot定义表格的页脚

其中caption,colgroup,col,标签比较少见到，标出用法

colgroup,col给整列设置上属性

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

</body>
</html>

image.png

caption设置标题

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<table border="1" align="center">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

image.png

thead, tbody, tfoot用来布局

thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
</head>
<body>

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

</body>
</html>

image.png

avatar
文章
阅读
粉丝