HTML 表格及练习

表格

概述

  • 表格是一种二维结构,横行纵列。

  • 由单元格组成。

  • 表格是一种非常“强” 的结构:

  • 每一行有相同的列数(单元格),每一列有相同的行数(单元格)

  • 同一列的单元格,宽度(以最大的为准)相同,同列等宽;同行等高

  • 基本结构

    <table>
        <tr>
            <td>td>
        tr>
    table>
    

  • 定义表格

标签属性

属性 举例 效果
border border=“0”
border=“1”
无边框
有边框
cellspacing cellspacing=“20” 设置边框与边框的距离
cellpadding cellpadding=“10” 设置边框与内容之间的距离
  • table 通用属性

    ,,
    • 定义行

    标签属性

    都识别的属性

    属性 举例 效果
    align left/center/right align=“center” 居中
    width 百分比/数字 width="80%"或 width=“800” 设置宽度
    height 百分比/数字 height="20%"或 height=“100” 设置高度

    属性 举例 效果
    valign top/middle/bottom valign=“top” 在行顶
    • 定义单元格

    • 合并单元格

      HTML 表格及练习_第1张图片

      colspan 用于跨列合并 (横向)

      <td colspan = "2">td>
      

      删除第四列,第三列的 colspan 的值设置为2

      rowspan 用于跨行合并 (纵向)

      <td rowspan = "3">td>
      

    练习

    基本表格

    <html>
        <head>
            <meta charset="utf-8">
        head>
        <body>
            <table border="1">
    			<tr>
    				<td>(1,1)td>
    				<td>(1,2)td>
    				<td>(1,3)td>
    			tr>
    			<tr>
    				<td>(2,1)td>
    				<td>(2,2)td>
    				<td>(2,3)td>
    			tr>
    			<tr>
    				<td>(3,1)td>
    				<td>(3,2)td>
    				<td>(3,3)td>
    			tr>
    		table>
        body>
    html>
    

    HTML 表格及练习_第2张图片

    跨行表格

    <html>
        <head>
            <meta charset="utf-8">
        head>
        <body>
            <table border="1" width="300">
    			<tr align="center">
    				<td rowspan="2">语文td>
    				<td>韩梅梅td>
    				<td>98td>
    			tr>
    			<tr align="center">
    				<td>李磊td>
    				<td>88td>
    			tr>
    			<tr align="center">
    				<td rowspan="2">数学td>
    				<td>韩梅梅td>
    				<td>95td>
    			tr>
    			<tr align="center">
    				<td>李磊td>
    				<td>12td>
    			tr>
    		table>
        body>
    html>
    

    HTML 表格及练习_第3张图片

    跨列表格

    <html>
        <head>
            <meta charset="utf-8">
        head>
        <body>
            <table border="1" width="300">
    			<tr>
    				<td colspan="3"  align="center">学生成绩td>
    			tr>
    			<tr>
    				<td>语文td>
    				<td>98td>
    			tr>
    			<tr>
    				<td>数学td>
    				<td>99td>
    			tr>
    		table>
        body>
    html>
    

    HTML 表格及练习_第4张图片

    跨行跨列表格

    <html>
        <head>
            <meta charset="utf-8">
        head>
        <body>
            <table border="1" width="300">
    			<tr>
    				<td colspan="3" align="center">学生成绩td>
    			tr>
    			<tr align="center">
    				<td rowspan="2">语文td>
    				<td>韩梅梅td>
    				<td>98td>
    			tr>
    			<tr align="center">
    				<td>李磊td>
    				<td>88td>
    			tr>
    			<tr align="center">
    				<td rowspan="2">数学td>
    				<td>韩梅梅td>
    				<td>95td>
    			tr>
    			<tr align="center">
    				<td>李磊td>
    				<td>12td>
    			tr>
    		table>
        body>
    html>
    

    HTML 表格及练习_第5张图片

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