Table Design by Managing Size, Merging Cells, and Layouts

Table Size and Width of a Column

The user can decide the table size based on his/her requirements while creating a website. The table size can be expanded when users want to add rows and columns. The user can use the <style> section to set the default width for the table to 100% of the browser window.

For setting the width of a column in pixels, you can use the style attribute in the <td> tag.

<tr>

 <td style="width: 100px;">Technology</td>

 <td style="width: 50px;">Crypto</td>

</tr>

The code creates a table with a border width of one pixel. The <style> element is used to set the table width to 100%. The width of the columns is set using the style attribute.

Merging Table Cells

Suppose the user wants to change the cells of a table to different heights and widths, then the colspan and rowspan attributes can be used. Consider a scenario where the user wants to merge a cell into adjacent cells on the right-hand side. The col span attribute can be used to specify the number of columns to span. Similarly, the user can use the row span attribute to specify the number of rows.

<table>

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$80</td>

  </tr>

  <tr>

    <td colspan="2">Sum: $180</td>

  </tr>

</table>

Apply Borders by Using Styles

Users can use CSS for applying borders as it is the most reliable and flexible method. The user must sell the CSS method for Websites that will be active for many years as the old formatting methods will not be used in the future. You can format the table by using style based border for <table> and <td> to evaluate the attributes used as follows:

1. The border-width attribute is used to control the thickness of the border and the values are specified in pixels.
2. The border-color attribute is used to control the color of the border and specifies the color by either name, RGB value, or hexadecimal number.
3. The border-style attribute is used to control the line style. Users can choose between solid dashed, groove, dotted, outset, ridge, inset, or none.

Suppose the user wants to set all these attributes at one time, then the user can use the border attribute and place the settings in the following order namely, width, color, and style respectively. The user can also format the sides of the border individually by replacing the border attribute with a border-bottom, border-top, border-right, or border-left attribute. The user can apply these attributes to the entire table or individual cells and also create rules in the <style> area.

Tables for Page Layout

Nowadays, there are many new techniques used for developing attractive Web pages. Tables are used for structuring content. In other words, tables are used by the user to organize data appropriately.

While accessing websites such as Yahoo, Rediff, and so on users can view that the home page is very informative with several links, images, and so on. Each website has its unique way of presenting data to its customers or users. Many websites use pop-ups to provide information to their customers.