HTML Tutorials
Tags:
Categories: ,

Overview

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.

Grade Class
A- Math
B English
B+ History
C+ Science

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. The bigger the border number, the thicker the border line.

<table border="1">

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
  • The cellpadding sets the distance between cell borders and the content within a cell
<table border="1" cellspacing="5" cellpadding="5">

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 width="75%">
Grade Class
A- Math
B English
B+ History
C+ Science

Spanning Rows

The rowspan attribute can be used to merge two or more rows into a single row.

<table>
    <tr>
        <th>Name</th>
        <td>Johnny</td>
    </tr>
    <tr>
        <th rowspan="2">Phone Number</th>
        <td>555-1234</td>
    </tr>
    <tr>
        <td>555-5678</td>
    </tr>
</table>
Name Johnny
Phone Number 555-1234
555-5678

Note

When combining rows, notice that the next <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>
    <tr>
        <th colspan="2">Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Johnny</td>
        <td>Shay</td>
        <td>11</td>
    </tr>
    <tr>
        <td>Marty</td>
        <td>Shay</td>
        <td>56</td>
    </tr>
</table>
Name Age
Johnny Shay 11
Marty Shay 56

Note

When combining columns, notice that we no longer need two sets of <td> tags within that <tr> row.

Note

The style attribute can also be used in the table, tr, th, and td tags to apply multiple CSS styles inline.

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.

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 (<p> tag = <p> element = paragraph on the page)
  • HTML5 is not case sensitive; so <P> is the same as <p>, <H1> is the same as <h1>
  • 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
If you like our content, and find it helpful, please consider making a small donation. Thank you!

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.