Table Style
Table Borders
The border attribute, which appears immediately inside the opening <table> tag, is the most common attribute of the <table> element. With it, you specify whether border lines are displayed around the table. This also serves as an indicator of the type of content the table contains. Tables are bad for layout because they are not accessible. They can not be difficult for assistive technology to read correctly, with a few tweaks, you can adjust your tables to use them for layout. If you use one or more of the following features, you are indicating that your table is probably a layout table and does not contain tabular data:
- Use the role attribute with the value presentation.
- Use the border attribute with a value of 0.
- Use the nonconforming cellspacing or cellpadding attributes with the value of 0.
Syntax for HTML
<table border = "1">
Syntax for CSS
<style>
table{
border: 1px solid red;
}
td, th{
border: 1px solid black;
}
</style>
Cell Padding
The cell padding attribute defines the amount of space between the edges of the cells and the content inside a cell, By default, many browsers draw tables with a cell padding of two two pixels. You can add more space by adding the nonconforming cellpadding attribute to the <table> element, with a value in pixels for the amount of cell padding you want. The advantages of doing so are that you can specify the padding for the top, left, right and bottom separately, and you can specify different padding amounts for different cells of the table if you choose to do so.
Syntax for HTML
<table border = "1" cellpadding = "8">
Cell Spacing
Cell spacing is similar to cell padding except that it affects the amount of space between cells - that is, the width of the space between the inner and outer lines that make up the table border. The nonconforming cellspacing attribute of the <table> elements affects the spacing for the table. Cell spacing is two pixels by default. Cell spacing also includes the outline around the table, which is just inside the table border as set by border attribute.
Syntax for HTML
<table border = "1" cellspacing = "5" cellpadding = "8">
Attribute
- border-spacing
- border-collapse
- If one value specified, it is used for all four sides of each cell.
- If two are specified, the first sets the horizontal spacing and the sets the vertical spacing.
- separate
- collapse
Syntax for CSS
<style>
table{
border: 1px solid black;
border-collapse: separate;
border-spacing: 10px 5px;
}
td, th{
border: 1px solid black;
}
</style>
Table Widths and Column Widths
Tables determine widths differently than other elements in HTML. Rather than each element taking up the full width of its container element, table elements only take up the width their content uses, up to full width of the container. This is very useful when you're working with CSS designs. The easiest way is to use the width property on the table itself. This defines how wide the table will be on the page. The width property can have value that is either the exact width of the table (in pixels) or a percentage (such as 50%) of the current container width, which can therefore change if the window or container element is resized.
You also can apply the width property to individual cells (<th> or <td>) to indicate the width of the columns in a table. As with table widths, using percentages rather than specific pixel widths is a better idea because it allows your table to be displayed regardless of the window size. Column widths are useful when you want to have multiple columns of identical widths, regardless of their contents.
Syntax
<table border = "1" style = "width: 100%;">
<caption> Details of Student </caption>
<tr>
<th style = "width: 40%;"> Name </th>
<th style = "width: 30%;"> Roll </th>
<th style = "width: 30%;"> Branch </th>
<th style = "width: 30%;"> Year </th>
</tr>
</table>
Cell and Caption Alignment
The text-align CSS property aligns content horizontally, whereas the vertical-align property aligns content vertically, and the course, you can use CSS properties to accomplish the same things, too.
Horizontal alignment (the text-align property)
The horizontal alignment defines whether the data within a cell:
- The left cell margin - left
- The right cell margin - right
- The centered cell margin - center
Vertical alignment (the vertical-align property)
The vertical alignment defines the vertical alignment of the data within the cell:
- The top of the cell - top
- The bottom of the cell - bottom
- The centered within the cell - middle
Syntax
<style>
tr{
text-align: center;
vertical-align: top;
}
td{
text-align: left;
vertical-align: bottom;
}
</style>
Background Color
This is how you change the background color of a table, a row, or a cell inside a row. You use the background-color property or background property. You can use style attribute in the <th> and <td> elements, just as you can in other elements.
Syntax
<style>
table{
width: 50%;
background-color: #ffffff;
}
tr{
text-align: center;
}
th{
width: 30%;
background-color: #ff0000;
}
td{
background-color: #008000;
}
</style>
Example - CSS Table
<!DOCTYPE html>
<html>
<head>
<title> CSS Table </title>
<style>
<style>
h2{
text-align: center;
}
table, th, td{
border: 1px solid red;
}
th, td{
padding: 10px 8px;
}
th{
background-color: #ffc0cb;
}
table{
border-collapse: collapse;
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<h2> Class Test Mark Sheet </h1>
<table>
<caption> Internal Exam Result </caption>
<thead>
<tr>
<th> Name </th>
<th> Mathematics </th>
<th> Physics </th>
<th> Chemistry </th>
</tr>
</thead>
<tbody>
<tr>
<td> Rahul Roy </td>
<td> 85 </td>
<td> 92 </td>
<td> 87 </td>
</tr>
<tr>
<td> Harry Wilson</td>
<td> 90 </td>
<td> 82 </td>
<td> 85 </td>
</tr>
<tr>
<td> Mrinal Sharma </td>
<td> 88 </td>
<td> 95 </td>
<td> 92 </td>
</tr>
<tr>
<td> Peter Smith </td>
<td> 90 </td>
<td> 87 </td>
<td> 93 </td>
</tr>
</tbody>
</table>
</body>
</html>