Adjust columns

More columns means more lines like this BEFORE </tr>

    html += "<td >extra column</td>";

Select allOpen in new window

How to ensure I have fixed width to the columns?

create an excel, adjust the cells and post here
or create a image, or create a demo like this one

https://jsfiddle.net/HainKurt/027v4pof/

is this what you want?

How to ensure I have fixed width to the columns?

it is defined on colgroup section of table

  <colgroup>
    <col width="12.5%" />
    <col width="12.5%" />
    <col width="12.5%" />
    <col width="12.5%" />
    <col width="12.5%" />
    <col width="12.5%" />
    <col width="12.5%" />
    <col width="12.5%" />
  </colgroup>

Select allOpen in new window

you can adjust individual column here... I put 12.5% just to make it look better in my demo...

you can use "nnnpx" or "nn%" or "*" to set widths...

Sorry, what to adjust below, to ensure picture file is ALWAYS at the end of the record, while I can have more columns, right before the picture file?

            $.each(response.d, function (index, house) {
                var img = (house.house_name != "") ? "<img class='imgHouse' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "House Name: " : "") + "</td><td colspan=3 >" + house.house_name + "</td>";
                //html += "<td rowspan=3 >" + img + "</td>"
                html += "<td rowspan=3 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=3><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>Delete</a></td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "Address: " : "") + "</td><td >" + house.address1 + "</td>";
                html += "<td >" + house.address2 + "</td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "Price: " : "") + "</td><td >" + house.price_curr + "</td>";
                html += "<td >" + house.price + "</td>";
                html += "<td >更新日期</td><td >" + house.upd_date + "</td>";
                html += "</tr>";

                html += "<tr style='background-color: transparent;'><td colspan=6 class='seperator'></td></tr>";

Select allOpen in new window

Widen col span before the pic, then add column:

            $.each(response.d, function (index, house) {
                var img = (house.house_name != "") ? "<img class='imgHouse' src='ImageHandler.ashx?ImID=" + house.raised_by_user_id + "' />" : "";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "House Name: " : "") + "</td><td colspan=4 >" + house.house_name + "</td>";
                //html += "<td rowspan=3 >" + img + "</td>"
                html += "<td rowspan=3 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=3><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>Delete</a></td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "Address: " : "") + "</td><td >" + house.address1 + "</td>";
                html += "<td >" + house.address2 + "</td>";
                html += "</tr>";

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "Price: " : "") + "</td><td >" + house.price_curr + "</td>";
                html += "<td >" + house.price + "</td>";
                html += "<td >更新日期</td><td >NEW</td><td >" + house.upd_date + "</td>";
                html += "</tr>";

                html += "<tr style='background-color: transparent;'><td colspan=6 class='seperator'></td></tr>";

Select allOpen in new window

Dear,
What to adjust below

html += "<td colspan=1.3 >更新日期</td><td colspan=1.2 >" + house.upd_date + "</td>";

Select allOpen in new window

as it does show with more than "2 lines" below?

html += "<td colspan=1.3 >更新日期</td><td colspan=1.2 >" + house.upd_date + "</td>";

Select allOpen in new window

??? not sure where did you get that syntax or who suggested but there is no such thing like "colspan=1.2"
it should be a whole number/integer, it is the count of columns that cell spans!

remove those things and adjust the col width here

<colgroup>
<col width="9.5%">
<col>
<col width="17.5%">
<col>
<col width="11%">
<col width="17.5%">
<col width="9.5%">
<col width="17.5%">
</colgroup>

Select allOpen in new window

these are columns definition...
it should be 4th column, so adjust that number...

I suggest, give all fixed sizes and make largest one as * (meaning allocate the rest to this column) like

<colgroup>
<col width="100px"/>
<col width="*"/>
<col width="100px"/>
<col width="100px"/>
<col width="100px"/>
<col width="200px"/>
<col width="200px"/>
<col width="60px"/>
</colgroup>

Select allOpen in new window

Dear,
How about that I want to have one more row to each record?

you need to add similar codes that you posted in your question...

ie, like this

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "Price: " : "") + "</td><td >" + house.price_curr + "</td>";
                html += "<td >" + house.price + "</td>";
                html += "<td >更新日期</td><td >" + house.upd_date + "</td>";
                html += "</tr>";

Select allOpen in new window

this is your row data... and adjust column...
also, after that, you need to adjust rowspan values (from 3 to 4, ie now there will be 4 rows)

How to remove highlighted part below?

<td colspan="2">平方尺</td>

>>>

<td colspan="4">平方尺</td>

same for next row... also remove "colspan=1" it does not mean anything...

Sorry to that, the highlighted part is still there now.

<td>0</td>

Select allOpen in new window

>>> move this to first row, add "rowspan="4""

and in the colgroup, add another col

<col width="50px" />

Select allOpen in new window

Sorry, what to adjust below

                html += "<tr class='houserow' data-id='" + house.house_id + "'>";
                html += "<td >" + (site_lang === "ENG" ? "房子名称 " : "") + "</td><td colspan=2 >" + house.house_name + "</td><td >地区</td><td >" + house.area + "</td><td ></td><td ></td>";
                html += "<td rowspan=4 style='text-align:center'>" + img + "</td>"
                html += "<td rowspan=4><a href='#' class='btnDelete' data-house-id='" + house.house_id + "'>Delete</a></td>";
                html += "</tr>";

Select allOpen in new window

to align the part (in Red) to the column (highlighted in yellow).

I put id (as you suggested), but I still cannot align RED part to column highlighted in Yellow.

I put "right" but it is still like this

I put "right" but it is still like this

and 3rd column / red one is aligned to right...

Sorry to that, I expect the part (in Red) to be exactly in the same column, like the part in Yellow.

you should understand tr/td and colspan/rowspan

if not you never can do what you want...

have a look at this excel and use merge and center and then align the text (left/right/top/bottom etc) prepare what you need, and post here

so we can help to write the code...
29063688.xlsx

ONLY TO 1ST ROW, I expect to switch the whole part (starting at Red part), one column towards the right. What to adjust?

<tr class="houserow" data-id="4">
  <td class="white" font-weight="bold">房子名称 </td>
  <td colspan="2">太古城一期三座</td>
  <td>地区</td>
  <td>香港島 東區</td>
  <td></td>
  <td></td>
  <td rowspan="4" style="text-align:center"><img class="imgHouse" src="ImageHandler.ashx?ImID=12"></td>
  <td rowspan="4"><a href="#" class="btnDelete" data-house-id="4">Delete</a></td>
</tr>

Select allOpen in new window

>>> try

<tr class="houserow" data-id="4">
  <td class="white" font-weight="bold">房子名称 </td>
  <td colspan="3">太古城一期三座</td>
  <td>地区</td>
  <td>香港島 東區</td>
  <td></td>
  <td rowspan="4" style="text-align:center"><img class="imgHouse" src="ImageHandler.ashx?ImID=12"></td>
  <td rowspan="4"><a href="#" class="btnDelete" data-house-id="4">Delete</a></td>
</tr>

Select allOpen in new window

TO ROW 2 BELOW, I want to switch part (in Red) to the column (in Yellow). How?

still your table is messed up!!!

check this

https://jsfiddle.net/HainKurt/r768a885/

and adjust your code according to this

<table border=1 width="100%">
  <colgroup>
    <col width="140px" />
    <col/>
    <col width="60px" />
    <col width="140px" />
    <col width="140px" />
    <col width="140px" />
    <col width="140px" />
    <col width="60px" />
  </colgroup>
  <tr class="houserow" data-id="4">
    <td class="white" font-weight="bold">房子名称 </td>
    <td colspan="2">太古城一期三座</td>
    <td>地区</td>
    <td colspan="2">香港島 東區</td>
    <td rowspan="4" style="text-align:center"><img class="imgHouse" src="ImageHandler.ashx?ImID=12"></td>
    <td rowspan="4"><a href="#" class="btnDelete" data-house-id="4">Delete</a></td>
  </tr>
  <tr class="houserow" data-id="4">
    <td>面积</td>
    <td>600</td>
    <td>平方尺</td>
    <td class="right2">价格 </td>
    <td>港币</td>
    <td>20000</td>
  </tr>
  <tr class="houserow" data-id="4">
    <td>类型</td>
    <td colspan="2">待租</td>
    <td>地址 </td>
    <td colspan="2">东区太古城道三号</td>
  </tr>
  <tr class="houserow" data-id="4">
    <td>更新日期</td>
    <td colspan="2">21-07-2014</td>
    <td>点击次数</td>
    <td colspan="2">3</td>
  </tr>
  <tr style="background-color: transparent;">
    <td colspan="8" class="seperator"></td>
  </tr>
...
</table>

Select allOpen in new window

fix all rowspan and colspans and remove extra empty td's...