CSS table
CSS tables and forms are the most common elements on web pages. In addition to displaying data, tables are often used for layout.
1 Table border with color
#The above example specifies the text and text of the Th, TD elements and th elements of a table Background color border:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
</body>
</html>To display a single border of a table, use the border-collapse attribute.
2 Table width and height
The Width and height attributes define the width and height of the table.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:50%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>汽车品牌</th>
<th>产地</th>
</tr>
<tr>
<td>马自达</td>
<td>日本</td>
</tr>
<tr>
<td>菲亚特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美国</td>
</tr>
</table>
</body>三 Table text alignment
text-align attribute sets the horizontal alignment, Like left, right, or center
vertical-align The vertical alignment property sets vertical alignment, like top, bottom, or center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid black;
}
td
{
height:50px;
vertical-align:bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>汽车品牌</th>
<th>产地</th>
</tr>
<tr>
<td>马自达</td>
<td>日本</td>
</tr>
<tr>
<td>菲亚特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美国</td>
</tr>
</table>
</body>
new file
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background-color: #f0ffff;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background-color: #f0fff0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>
</head>
<body>
<table class="imagetable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
</body>
</html>
Preview
Clear
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
Let's briefly talk about starting a business in PHP
Quick introduction to web front-end development
Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things
Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]
Login verification and classic message board
Computer network knowledge collection
Quick Start Node.JS Full Version
The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)