Table size, borders, cell padding, and cell spacing, and can all be changed by using table attributes. Additionally, multiple rows or columns can be merged into one if necessary.
Below is the code for our basic table with no attributes. The table size will only be as big as it needs to be to display the information. There will be no borders, and cell spacing/padding will be at a minimum.
<table>
<tr>
<th>Grade</th>
<th>Class</th>
</tr>
<tr>
<td>A-</td>
<td>Math</td>
</tr>
<tr>
<td>B</td>
<td>English</td>
</tr>
<tr>
<td>B+</td>
<td>History</td>
</tr>
<tr>
<td>C+</td>
<td>Science</td>
</tr>
</table>
It may look like something like this, depending on your browser.
Border Attribute
We can place the border attribute inside the opening table tag and set it to a value of 1 to achieve a border.
<table border="1">
If we set the border value to a larger number, like 4, we get this.
Setting Cell Padding and Spacing
There are two attributes called cellpadding and cellspacing which are used to adjust the white space in the table cells. The cellspacing attribute sets space between table cells, while cellpadding sets the distance between cell borders and the content within a cell.
<table border="1" cellpadding="5" cellspacing="5">
By setting the cellspacing attribute to zero, we could collapse the borders to eliminate the double border interior of our table.
<table border="1" cellpadding="5" cellspacing="0">
Table Width and Height
The table width attribute and height attribute can be used to set the size of the table. Typically, we would set the table width and let the height auto set so that we don’t distort the table (we could better use spacing to get the desired height look).
Pixels or percentage can be used. When using pixels, there is no need for the px.
<table border="1" width="90%">
Spanning Rows
The rowspan attribute can be used to merge two or more rows into a single row.
<table border="1" width="300">
<tr>
<th>Grade</th>
<th>Class</th>
</tr>
<tr>
<td rowspan="2">NO INFO</td>
<td>Math</td>
</tr>
<tr>
<td>English</td>
</tr>
<tr>
<td>B+</td>
<td>History</td>
</tr>
<tr>
<td>C+</td>
<td>Science</td>
</tr>
</table>
tr /tr set will now contain one fewer td for each row spanned.
Spanning Columns
The colspan attribute can be used to merge two or more columns into a single column.
<table border="1" width="300">
<tr>
<th>Grade</th>
<th>Class</th>
</tr>
<tr>
<td colspan="2">NO INFO</td>
</tr>
<tr>
<td >B</td>
<td>English</td>
</tr>
<tr>
<td>B+</td>
<td>History</td>
</tr>
<tr>
<td>C+</td>
<td>Science</td>
</tr>
</table>
td tags within that tr row.
Many of the things you can do to style a table can also be done via CSS. It is usually a best practice to do it via CSS. This does not include spanning rows or columns which must be done by attribute.
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
HTML Books
All are affiliate links. Thank you for your support!
HTML NOTES:
- In our HTML section the term “tag” and “element” are often used interchangeably to refer to both the tag used to create a page element and the element created by the tag (
ptag =pelement = paragraph on the page) - HTML5 is not case sensitive; so
Pis the same asp,ÂH1is the same ash1 - Global attributes can be used with all HTML tags and are therefore not mentioned on every tag page
- To write clean, readable HTML code, it is best to use indentation whereas elements within elements are indented (tabbed or spaces) to create something that looks like a project outline
- The browser will automatically remove any extra spaces and lines in your HTML code when the page is displayed
- Double quotes or single quotes can be used around HTML attribute values, but when the attribute value itself contains one form of quote, it will be necessary to use the other around the attribute
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
