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 singleborder.
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 tablecaption (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>
