Scribd
Upload
31 views6 pages

CSS TABLE Tutorial

CSS TABLE Tutorial

Uploaded by

manahandmade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
31 views6 pages

CSS TABLE Tutorial

CSS TABLE Tutorial

Uploaded by

manahandmade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

‭CSS TABLE‬

‭เรา set อะไรให้กับ div ได้ เราก็ set ให้กับ table ได้หมด‬

<table>‬
‭
<tr>‬
‭
<td class="box">Cell
‭ 1</td>‬
<td class="box">Cell
‭ 2</td>‬
</tr>‬
‭
<tr>‬
‭
<td class="box">Cell
‭ 3</td>‬
<td class="box">Cell
‭ 4</td>‬
</tr>‬
‭
</table>‬
‭

<style>‬
‭
.box {‬
‭
color: blue;
‭ /* Text color */‬
font-size: 16px;
‭ /* Font size */‬
background-color: lightgray; /* Background color */‬
‭
padding: 10px;
‭ /* Padding inside the cell */‬
border: 1px solid black; /* Border around the cell */‬
‭
text-align: center;
‭ /* Center text alignment */‬
}‬
‭
</style>‬
‭

‭Table Properties‬
‭: Sets the border around the table.‬
border‬
‭

table {‬
‭
border: 1px solid black;‬
‭
}‬
‭

‭ .‬
1
‭2.‬ ‭ ‭: Merges table borders into a single‬‭border.‬
border-collapse‬
‭○‬ ‭Values:‬‭ ‭,‬‭
collapse‬ ‭.‬
separate‬

table {‬
‭
border-collapse: collapse;‬
‭
}‬
‭

‭3.‬

‭: Sets the width of the table.‬


width‬
‭

table {‬
‭
width: 100%; /* Full width of the parent container */‬
‭
}‬
‭

‭4.‬

‭: Sets the height of the table.‬


height‬
‭

table {‬
‭
height: 200px;‬
‭
}‬
‭

‭ .‬
5
‭6.‬ ‭ ‭: Specifies the position of the table‬‭caption (if any).‬
caption-side‬
‭○‬ ‭Values:‬‭ ‭,‬‭
top‬ ‭,‬‭
bottom‬ ‭,‬‭
left‬ ‭.‬
right‬

table {‬
‭
caption-side: top;‬
‭
}‬
‭

‭7.‬

‭Table Row Properties‬


‭: Sets the background color of a row.‬
background-color‬
‭

tr {‬
‭
background-color: #f2f2f2; /* Light gray */‬
‭
}‬
‭
‭1.‬

‭: Sets the height of a table row.‬


height‬
‭

tr {‬
‭
height: 50px;‬
‭
}‬
‭

‭2.‬

‭Table Data and Header Cell Properties‬


‭: Sets the padding inside cells.‬
padding‬
‭

td, th {‬
‭
padding: 10px; /* Space inside the cells */‬
‭
}‬
‭

‭1.‬

‭: Sets borders around table cells.‬


border‬
‭

td, th {‬
‭
border: 1px solid black;‬
‭
}‬
‭

‭2.‬ ‭ ‭: Aligns text within cells.‬


text-align‬
‭○‬ ‭Values:‬‭ ‭,‬‭
left‬ ‭,‬‭
right‬ ‭,‬‭
center‬ ‭.‬
justify‬

td, th {‬
‭
text-align: center; /* Center text */‬
‭
}‬
‭

‭3.‬ ‭ ‭: Aligns text vertically within cells.‬


vertical-align‬
‭○‬ ‭Values:‬‭ ‭,‬‭
top‬ ‭,‬‭
middle‬ ‭.‬
bottom‬
td, th {‬
‭
vertical-align: middle; /* Vertically centers text */‬
‭
}‬
‭

‭4.‬

‭: Sets the text color in cells.‬


color‬
‭

td, th {‬
‭
color: blue; /* Text color */‬
‭
}‬
‭

‭5.‬

‭: Sets the font size in cells.‬


font-size‬
‭

td, th {‬
‭
font-size: 16px;‬
‭
}‬
‭

‭6.‬

‭: Sets the font weight (boldness).‬


font-weight‬
‭

th {‬
‭
font-weight: bold; /* Bold header cells */‬
‭
}‬
‭

‭7.‬

‭: Sets the background color of cells.‬


background-color‬
‭

td {‬
‭
background-color: #e0e0e0; /* Light gray */‬
‭
}‬
‭
‭Example of Table Styling‬

‭Here’s an example that uses many of the properties mentioned:‬


<table>‬
‭
<caption>Sample Table</caption>‬
‭
<tr>‬
‭
<th>Header 1</th>‬
‭
<th>Header 2</th>‬
‭
</tr>‬
‭
<tr>‬
‭
<td>Data 1</td>‬
‭
<td>Data 2</td>‬
‭
</tr>‬
‭
<tr>‬
‭
<td>Data 3</td>‬
‭
<td>Data 4</td>‬
‭
</tr>‬
‭
</table>‬
‭

<style>‬
‭
table {‬
‭
border-collapse: collapse;‬
‭
width: 100%;‬
‭
border: 1px solid black;‬
‭
}‬
‭

th, td {‬
‭
padding: 10px;‬
‭
border: 1px solid black;‬
‭
text-align: center;‬
‭
vertical-align: middle;‬
‭
}‬
‭

th {‬
‭
background-color: #f2f2f2; /* Light gray for header */‬
‭
font-weight: bold;‬
‭
}‬
‭

td {‬
‭
background-color: #e0e0e0; /* Light gray for data cells */‬
‭
}‬
‭
</style>‬
‭

You might also like