We can style HTML tables in CSS by targeting the table, tr, td, and th elements using CSS selectors and applying various CSS properties to them.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<table>
<tr>
<th>Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Slavoj</td>
<td>Zizek</td>
</tr>
<tr>
<td>Jordan</td>
<td>Peterson</td>
</tr>
</table>
</body>
</html>
The HTML code above creates a simple table with two columns and three rows. The table consists of three main elements: <table>, <tr>, and <td>.
The <table> element defines the table and contains all the other elements that make up the table. Inside the <table> element, there are two rows defined by the <tr> element. The first row contains two header cells, defined by the <th> element, with the titles "Name" and "Last Name". The second and third rows contain two data cells each, defined by the <td> element, with the names "Slavoj" and "Zizek" in the second row, and "Jordan" and "Peterson" in the third row.
The <th> element is used to define header cells in a table, which are typically used to provide a title for a column. The <td> element, on the other hand, is used to define data cells in a table, which contain the actual data for each row and column.
By default, the table has no styling, but it can be styled using CSS to change its appearance, such as setting the border, background color, font size, and so on.
table {
width: 500px;
border: 2px blue solid;
}
This CSS code sets the width of the table to 500 pixels and applies a blue solid border with a thickness of 2 pixels to the table.
By default, tables in HTML do not have borders, so this CSS code adds a visible border to the table to separate it visually from other elements on the page. The border style is set to "solid", which means the border is a continuous line, and the color is blue.
The width of the table is set to 500 pixels, which means that the table will take up 500 pixels of horizontal space on the page. This can be useful to ensure that the table fits within a certain area on the page and to give it a consistent size across different devices and screen sizes.
table {
width: 500px;
border: 2px blue solid;
}
th, td {
width: 500px;
border: 2px blue solid;
}
The th, td selector targets both the table header cells (th) and regular table cells (td) in an HTML table, and sets their width to 500 pixels and adds a blue 2-pixel wide solid border around them.
Combination
table, th, td {
width: 500px;
border: 2px blue solid;
}
This CSS code will apply a 2px wide blue solid border to all table elements including the table itself, table headers (th), and table data cells (td). It will also set the width of all these elements to 500px.
table, th, td {
width: 500px;
border: 2px blue solid;
border-collapse: collapse;
}
This CSS code is styling the table, table headers (th), and table cells (td) by setting the width of each element to 500px, and setting a 2px blue solid border for each element. The border-collapse: collapse property is also added, which merges the borders between adjacent cells to make the table look like a single border.
Overall, this CSS code will give a consistent width and border styling to the table, headers, and cells, making the table look more organized and visually appealing. The border-collapse: collapse property will also ensure that the table cells are tightly spaced and the borders are not unnecessarily repeated.
table, th, td {
width: 500px;
border: 2px blue solid;
border-collapse: collapse;
}
th {
background: lightblue;
color: black;
height: 40px;
}
This CSS code sets the following styles for the HTML table and its elements:
- The width of the table, table headers (th), and table data (td) is set to 500px.
- The border of the table, table headers, and table data is set to a 2px blue solid line.
- The border-collapse property is set to collapse, which means that the table borders will merge into a single border where they meet.
- The background color of table headers is set to light blue.
- The text color of table headers is set to black.
- The height of table headers is set to 40px.
Overall, this code will create a table with a blue border, a fixed width of 500px, and collapsed borders. The table headers will have a light blue background, black text, and a height of 40px. The table data will have the same width and border style as the headers.
No comments:
Post a Comment