CSS表格样式

文章目录

  • CSS表格样式
    • caption-side 标题位置
    • border-collapse 边框合并
    • border-spacing 边框间距
    • css样式(推荐使用)

CSS表格样式

caption-side 标题位置

语法

caption-side: 取值;

取值

属性值 说明
top 默认值,标题在顶部
bottom 标题在底部

使用

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style type="text/css">
			table,
			th,
			td {
				border: 1px solid silver;
			}

			table {
				width: 100%;
			}

			table {
				caption-side: top;
			}
		style>
	head>
	<body>
		<table>
			<caption>表格标题caption>
			
			<thead>
				<tr>
					<th>表头单元格1th>
					<th>表头单元格2th>
				tr>
			thead>
			
			<tbody>
				<tr>
					<td>表行单元格1td>
					<td>表行单元格2td>
				tr>
				<tr>
					<td>表行单元格3td>
					<td>表行单元格4td>
				tr>
			tbody>
			
			<tfoot>
				<tr>
					<td>表行单元格5td>
					<td>表行单元格6td>
				tr>
			tfoot>
		table>
	body>
html>

CSS表格样式_第1张图片

border-collapse 边框合并

语法

border-colapse: 取值;

取值

属性值 说明
separate 默认值,边框分开,有空隙
collapse 边框合并,无空隙

使用

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style type="text/css">
			table,
			th,
			td {
				border: 1px solid silver;
			}

			table {
				width: 100%;
				border-collapse: collapse;
			}
		style>
	head>
	<body>
		<table>
			
			<thead>
				<tr>
					<th>表头单元格1th>
					<th>表头单元格2th>
				tr>
			thead>
			
			<tbody>
				<tr>
					<td>表行单元格1td>
					<td>表行单元格2td>
				tr>
				<tr>
					<td>表行单元格3td>
					<td>表行单元格4td>
				tr>
			tbody>
			
			<tfoot>
				<tr>
					<td>表行单元格5td>
					<td>表行单元格6td>
				tr>
			tfoot>
		table>
	body>
html>

CSS表格样式_第2张图片

border-spacing 边框间距

语法

border-spacing: 像素值;

使用

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style type="text/css">
			table,
			th,
			td {
				border: 1px solid silver;
			}

			table {
				width: 100%;
				border-spacing: 0px;
			}
		style>
	head>
	<body>
		<table>
			
			<thead>
				<tr>
					<th>表头单元格1th>
					<th>表头单元格2th>
				tr>
			thead>
			
			<tbody>
				<tr>
					<td>表行单元格1td>
					<td>表行单元格2td>
				tr>
				<tr>
					<td>表行单元格3td>
					<td>表行单元格4td>
				tr>
			tbody>
			
			<tfoot>
				<tr>
					<td>表行单元格5td>
					<td>表行单元格6td>
				tr>
			tfoot>
		table>
	body>
html>

CSS表格样式_第3张图片

css样式(推荐使用)

CSS表格样式_第4张图片
<style>
    table {
        width: 50%;
        border: 1px solid black;
        margin: 0 auto;
        border-collapse: collapse;
    }

    td {
        height: 50px;
        border: 1px solid black;
        text-align: center;
        vertical-align: center;
    }

    tbody tr:nth-child(even) {
        background-color: antiquewhite;
    }
style>

<body>
    <table>
        <tr>
            <td>编号td>
            <td>姓名td>
            <td>年龄td>
            <td>地址td>
        tr>
        <tr>
            <td>01td>
            <td>唐僧td>
            <td>100td>
            <td>西天td>
        tr>
        <tr>
            <td>02td>
            <td>孙悟空td>
            <td>500td>
            <td>花果山td>
        tr>
        <tr>
            <td>03td>
            <td>猪八戒td>
            <td>400td>
            <td>高老庄td>
        tr>
        <tr>
            <td>04td>
            <td>沙和尚td>
            <td>300td>
            <td>流沙河td>
        tr>
    table>
body>

在表格中,若没有使用tbody而是直接使用tr,这时浏览器会自动创建一个tbody,并将所有tr全部放到tbody中,所以tr不受table的子元素。

下图是在浏览器中的结构:

CSS表格样式_第5张图片

你可能感兴趣的:(#,CSS,css,表格样式)