零基础学习Web开发(12)——table标签(上)

文章目录

      • 官方资料
      • 学习正文

注:学习笔记基于小甲鱼学习视频,官方论坛: https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库:https://ilovefishc.com/html5/
html5速查手册:https://man.ilovefishc.com/html5/
css速查手册:https://man.ilovefishc.com/css3/

学习正文

table标签:https://man.ilovefishc.com/pageHTML5/table.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十四节课title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
head>
<body>
	
	
	<table>
		<tr>
			<th>年龄th>
			<th>姓名th>
		tr>
		<tr>
			<td>小甲鱼td>
			<td>18td>
		tr>
		<tr>
			<td>不二如是td>
			<td>28td>
		tr>
	table>
html>

零基础学习Web开发(12)——table标签(上)_第1张图片
CSS定制表格边框:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十四节课title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
		table {
      
			border: 1px solid black;
			border-collapse: collapse;
		}
		th {
      
			border: 1px solid red;
		}
		td {
      
			border: 1px solid blue;
		}
	style>
head>
<body>
	
	
	<table>
		<tr>
			<th>年龄th>
			<th>姓名th>
			<th>随便说几句话th>
		tr>
		<tr>
			<td>小甲鱼td>
			<td>18td>
			<td>让编程改变世界!td>
		tr>
		<tr>
			<td>不二如是td>
			<td>28td>
			<td>表格的长度会根据单元格的长度自动变化td>
		tr>
	table>
html>

给表格添加标题:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十四节课title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
	<style>
		table {
      
			border: 1px solid black;
			border-collapse: collapse;
		}
		th {
      
			border: 1px solid red;
		}
		td {
      
			border: 1px solid blue;
		}
	style>
head>
<body>
	
	<table>
		<caption>添加一个标题caption>
		<tr>
			<th>年龄th>
			<th>姓名th>
			<th>随便说几句话th>
		tr>
		<tr>
			<td>小甲鱼td>
			<td>18td>
			<td>让编程改变世界!td>
		tr>
		<tr>
			<td>不二如是td>
			<td>28td>
			<td>表格的长度会根据单元格的长度自动变化td>
		tr>
	table>
html>

零基础学习Web开发(12)——table标签(上)_第2张图片
通过CSS的 padding 属性调整单元格的内边距:


<html>
<head>
    <title>复仇者联盟主要成员技能表title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
    <meta name="description" content="《零基础入门学习Web开发》案例演示">
    <meta name="author" content="小甲鱼">
    <style>
        table {
      
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
      
            border: 1px solid black;
            padding: 5px;
        }
        caption {
      
            padding: 10px;
        }
    style>
head>
<body>
    <table>
        <caption>复仇者联盟主要成员技能表caption>
    <thead>
        <tr>
            <th>外号th>
            <th>原名th>
            <th>特长th>
            <th>照片th>
        tr>
    thead>
    <tbody>
        <tr>
            <th>美国队长th>
            <td>史蒂芬·罗杰斯td>
            <td>强化体格td>
            <td><img src="./CaptainAmerica.jpg" alt="美国队长" width="300">td>
        tr>
        <tr>
            <th>钢铁侠th>
            <td>托尼·斯塔克td>
            <td>有钱td>
            <td><img src="./IronMan.jpg" alt="钢铁侠" width="300">td>
        tr>
        <tr>
            <th>雷神th>
            <td>托尔td>
            <td>操控雷电td>
            <td><img src="./Thor.jpg" alt="雷神" width="300">td>
        tr>
        <tr>
            <th>绿巨人th>
            <td>布鲁斯·班纳td>
            <td>变大变强td>
            <td><img src="./Hulk.jpg" alt="绿巨人" width="300">td>
        tr>
        <tr>
            <th>黑寡妇th>
            <td>娜塔莎·罗曼诺夫td>
            <td>性感td>
            <td><img src="./BlackWidow.jpg" alt="黑寡妇" width="300">td>
        tr>
    tbody>        
    table>
body>
html>

你可能感兴趣的:(HTML,html,web)