表格111

表格

• <table>标签：告诉浏览器在<table>内包含的内容属于表格。

  • border属性：用来定义边框
  • width属性：定义表格的宽度
  • cellspacing属性：单元格与单元格之间的距离。

• 标题：<caption>标签。

• 表头：<thead>

• 表格主体数据：<tbody>

• 表格脚注：<tfoot>

注意：

1. thead、tbody、tfoot中每一行使用tr来表示。
2. 如果说是thead中的行的每个单元格我们使用th来表示
3. tbody和tfoot中的每一行中的每个单元格使用<td>。
4. 虽然可以省略但是自动会加上的标签：html、head、body、tbody(即使被省略了，它也是隐式存在的)

• tr中的属性

  • height属性：设置tr的高度。
  • align属性：设置本行的文本的对齐方式
    • left
    • center
    • right
  • valign属性：规定表格行中内容的垂直对齐方式
    • top：顶部对齐
    • middle：垂直居中对齐
    • bottom：底部对齐

• td中的属性：

  • colspan：规定单元格可以横跨的列数。
  • rowspan：规定单元格可以竖跨的行数。

<table border="2" width="320px" cellspacing="0" bgcolor="#FFFF00">
            <tr>
                <td colspan=3 align="center"><b>星期一菜谱</b></td>
            </tr>
            <tr>
                <td rowspan=2>素菜</td>
                <td>青草茄子</td>
                <td>花椒扁豆</td>
            </tr>
            <tr>
                <td>小葱豆腐</td>
                <td>炒白菜</td>
            </tr>
            <tr>
                <td rowspan=2>荤菜</td>
                <td>油闷大虾</td>
                <td>海参鱼翅</td>
            </tr>
            <tr>
                <td>红烧肉<img src="https://img1.baidu.com/it/u=1809207165,3572617058&fm=26&fmt=auto&gp=0.jpg" alt="红烧肉的图片"
                        width="160px" height="120px" /></td>
                <td>烤全羊</td>
            </tr>
        </table>