HTML_表格的语法及使用

目录

  • 1、HTML表格介绍:
  • 2、表格属性:
  • 3、总结

1、HTML表格介绍:

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

表格基本框架:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<table> 

    <thead>
    <tr>
        <th>姓名th> 
        <th>年龄th>
    tr>
    thead>
    
    <tbody>
    <tr>
        <td>张三td>
        <td>18td>
    tr>
    tbody>

    <tfoot>
    <tr>
        <td>李四td>
        <td>24td>
    tr>
    tfoot>

table>

body>
html>

运行结果:

HTML_表格的语法及使用_第1张图片

2、表格属性:

HTML_表格的语法及使用_第2张图片

border属性值:

<table border="1"> 

    <thead>
    <tr>
        <th>姓名th> 
        <th>年龄th>
    tr>
    thead>

    <tbody>
    <tr>
        <td>张三td>
        <td>18td>
    tr>
    tbody>

    <tfoot>
    <tr>
        <td>李四td>
        <td>24td>
    tr>
    tfoot>

table>

运行结果:

HTML_表格的语法及使用_第3张图片

3、总结

< table > 标签的常用属性:

属性 作用 参数
border 表格边框的宽度 1
bordercolor 表格边框的颜色 #fff
cellspacing 单元格之间的间距 5
cellpadding 单元格的上下间距 5
width 表格的总宽度 500
height 表格的总高度 100
align 表格整体对齐方式 left、center、right
bgcolor 表格整体的背景色 #fff


< tr > 标签的常用属性:

属性 作用 参数
bgcolor 行的颜色 #fff
align 行内文字的水平对齐方式 left、center、right
valign 行内文字的垂直对齐方式 top、middle、bottom



< td >、< th > 标签的常用属性:

属性 作用 参数
width 单元格的宽度,设置后对当前一列的单元格都有影响 500
height 单元格的高度,设置后对当前一行的单元格都有影响 100
bgcolor 单元格的背景色 #fff
align 单元格文字的水平对齐方式 left、center、right
rowspan 合并垂直水平方向的单元格 3
colspan 合并水平方向单元格 3
valign 单元格文字的垂直对齐方式 middle、bottom、top

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