10、表格

表格

• 早期 表格使用来实现页面布局
• 现在 用来显示表格数据
• 表格——将数据有效地组织在一起，并以网格的形式进行显示

1、创建表格

包含table标签、tr标签、单元格；单元格中可以放置任意内容(文本、标签)

<table border="1">
	<tr>
		<th>表格单元头th>
	tr>
	<tr>
		<td>普通单元格td>
		<td>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>

注意：在一个table标签中只能有一个thead和一个tfoot，但是可以有多个tbody标签，这些数据只能放在table标签中

2、表格特性

• 有内容，没有设置宽度的单元格，由内容撑开
• 没有内容，没有设置宽度的单元格，默认平分整个表格
• 同一个单元格，高度只会识别一个，取最大值
• 同一个单元格，宽度只会识别一个，取最大值

3、表格属性

• border属性：表格边框
  • border="0"默认，没有边框
  • border=“1”
• width属性：宽度
• height属性：高度
• cellpadding属性：单元格和边框之间的距离
• cellspacing属性：单元格之间的距离，默认值2px

<table border="1" cellpadding="30" cellsapcing="0">
table>

• 合并单元格
  • 跨列合并单元格 colspan=“合并单元格的数量”
  • 跨行合并单元格 rowspan=“合并单元格的数量”
  • 实现步骤
    • 1）确定跨行、跨列合并单元格
    • 2）找到目标单元格，添加合并单元格属性设置合并属性
    • 3）删除多余的单元格
• 表格的css属性
  • border-collapse属性
    • collpase;边框合并
    • separate;单元格边框独立，默认值
  • border-spacing属性 当边框独立时，行和单元格在水平方向和垂直方向的间距
    • 如果有两个值，第一个值表示水平方向，第二个值表示垂直方向
    • 如果只有一个值，表示水平和垂直方向的间距
      例：

<table border="1">
        <caption>求职简历caption>
        <tr>
            <th>学院th>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <th>专业th>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <th>姓名th>
            <td>XXXtd>
            <th>性别th>
            <td>男td>
            <th>民族th>
            <td>汉td>
            <td>td>
        tr>
        <tr>
            <th>生日th>
            <td>yyyy-mm-ddtd>
            <th>籍贯th>
            <td>中国td>
            <th>身高th>
            <td>00td>
            <td>td>
        tr>
        <tr>
            <th>学历th>
            <td>大专td>
            <th>政治面貌th>
            <td>党员td>
            <td>td>
            <td>td>
            <td>td>
        tr>
    table>

<table border="1" width="1000">
        <tr>
            <td height="100" width="100">td>
            <td height="50">td>
        tr>
        <tr>
            <td width="200">td>
            <td>td>
        tr>
    table>
    <hr>
    <table border="10" width="1000">
        <tr>
            <td height="100" width="100">td>
            <td height="50">td>
        tr>
        <tr>
            <td width="200">td>
            <td>td>
        tr>
    table>
    <hr>
    <table border="1" cellpadding="30" cellspacing="0">
        <tr>
            <td>单元格td>
            <td>单元格td>
        tr>
        <tr>
            <td>单元格td>
            <td>单元格td>
        tr>
    table>

总结

• 表格优点：方便排列一些有规律的、结构均匀的内容或数据
• 表格缺点：产生垃圾代码，影响页面下载速度、时间，灵活性不大，难于修改