HTML tables can be styled to a point using tag attributes like border, cell-padding, cell-spacing, and width/height.

<table border="1" cellpadding="5" cellspacing="5" width="300">
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

However this is somewhat limited, and CSS can be used to make your tables look exactly as you intend.

Plus, the styles will apply to all tables site wide, removing the need to style each table individually from within the <table> tag.

Set the width:

table {
    width: 100%;
}

Styling and collapsing the border:

By default a table will have a border around it and each cell will have a border around it, and there is space between these borders creating a double-border effect. By using the border-collapse property, these borders are merged into one making them more pleasing to the eye. And to add to the look, we can set the border color, style, and size.

table, th, td {
    border: red solid thin;
    border-collapse: collapse;
}

Adjusting the text and padding:

th, td {
    color: red;
    font-size: 12px;
    font-weight: bold;
    padding: 10px;
    text-align: left;
}

• CSS – border Property
  The border property is a shorthand property for all the other properties a CSS border can be given.
• CSS – border-collapse Property
  The border-collapse property sets whether table borders should collapse into a single border or remain separated as is the default.
• CSS – border-spacing Property
  The border-spacing property sets the distance between the borders of adjacent table cells. This property only works when border-collapse is set to separate.
• CSS – caption-side Property
  The caption-side property specifies the placement of a table caption to the top or bottom.
• CSS – empty-cells Property
  The empty-cells property sets whether or not to display borders on empty cells in a table.
• CSS – table-layout Property
  The table-layout property defines the algorithm used to layout table cells, rows, and columns.