tabel html &; gaya sebaris

Saya tidak memiliki banyak pengalaman dengan tabel HTML dan CSS in-line, tetapi saya mencoba membuat signature email HTML. Idealnya, saya ingin memiliki gambar kecil di sebelah kiri, teks di tengah, dan logo yang lebih besar di sebelah kanan, dengan sebaris teks di tengah di bawah semuanya.

Saya memiliki konten dasar, namun saya telah mencoba menyelaraskan semuanya dengan float yang tampaknya tidak berfungsi. Apa cara terbaik untuk membuat semuanya berbaris secara horizontal?

[jsfiddle][1]

<br />
<meta name="format-detection" content="telephone=no">
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:0;padding:0;">
<tr>
<td width="47" style="float:left;width:47px;margin:0;padding:0;">
<a href='http://example.com' style="border:none;text-decoration:none;"><img src="http://lorempixel.com/47/43/" alt="First Last" style="border:none;width:47px;"></a>
</td>

<td width="10" style="width:10px;"> </td>  

<td valign='top' style="margin:0;padding:0;">
<table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="float:left;padding:0;margin:0;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:13px;color:#D31145;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;"><a style="border:none;text-decoration:none;color:#D31145;" href="mailto:email@example.com">FIRST LAST</a>
</td>
</tr>

<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;">
<span style="border:none;text-decoration:none;color:#000104;">REALTOR | P <a style="border:none;text-decoration:none;color:#000104;" href="tel:1111111111">111.111.1111</a></span>
</td>
</tr>

<td width="177" style="float:right;width:177px;margin:0;padding:0;">
<a href='http://example.com' style="border:none;text-decoration:none;"><img src="http://lorempixel.com/177/54/" alt="ZOPA Realty Group" style="border:none;width:177px;"></a>
</td>
</table>

<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:-15 0 0 60;padding:0;">
<tr>
<td><span style="margin:0;padding-left:8px;font-size:7px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;color:#000104;white-space:nowrap;">BRE xxxxxxxx | Broker BRE xxxxxxxx. In association with Keller Williams.  Each Keller Williams Realty office is independently owned and operated.</span></td>

<br />
 

Brian Tompsett - 汤莱恩
Pertanyaan edit 26 Juni 2017 в 5:44
Pemrograman
html css html-table html-email
28 Oktober 2013 в 11:24
34 tayangan
Larutan

Lupakan float, margin dan html 3/5. Surat sangat usang. Anda perlu melakukan semua dengan tabel. Satu baris = satu tabel. Anda butuh margin atau padding? Lakukan kolom lain.

Codepen

Contoh : saya membutuhkan satu baris dengan 1 Satu gambar 40*40 2 Satu margin 10 px 3 Satu teks 400px

Saya memulai baris saya:


<table style=" background-repeat:no-repeat; width:450px;margin:0;" cellpadding="0" cellspacing="0" border="0">
   <tr style="height:40px; width:450px; margin:0;">
     <td style="height:40px; width:40px; margin:0;">
ColoO
Jawaban edit 29 Oktober 2013 в 8:50
Komentar (7)

Ini akan berhasil:

<table width="400" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" height="40" valign="top" rowspan="3">

    </td>
    <td width="350" height="40" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<a href="" style="color: #D31145; font-weight: bold; text-decoration: none;">LAST FIRST</a><br>
REALTOR | P 123.456.789
    </td>
  </tr>
  <tr>
    <td width="350" height="70" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">

    </td>
  </tr>
  <tr>
    <td width="350" height="20" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
    </td>
  </tr>
</table>

UPDATE: Kode yang disesuaikan sesuai komentar:

Setelah melihat jsFiddle Anda, hal penting yang perlu diperhatikan tentang tabel adalah bahwa lebar sel tabel di setiap baris tambahan semuanya harus sama lebarnya dengan baris pertama, dan semua sel harus ditambahkan ke total lebar tabel Anda.

Berikut ini adalah contoh yang TIDAK AKAN BEKERJA:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" bgcolor="#252525"> 
    </td>
    <td width="400" bgcolor="#454545"> 
    </td>
  </tr>
  <tr>
    <td width="300" bgcolor="#252525"> 
    </td>
    <td width="300" bgcolor="#454545"> 
    </td>
  </tr>
</table>

Meskipun baris ke-2 memang berjumlah 600, baris tersebut (dan baris tambahan lainnya) harus memiliki split 200-400 yang sama dengan baris pertama, kecuali jika Anda menggunakan colspan. Jika Anda menggunakan colspan, Anda bisa memiliki satu baris, tetapi perlu memiliki lebar yang sama dengan sel yang direntangnya, jadi ini berfungsi:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" bgcolor="#252525"> 
    </td>
    <td width="400" bgcolor="#454545"> 
    </td>
  </tr>
  <tr>
    <td width="600" colspan="2" bgcolor="#353535"> 
    </td>
  </tr>
</table>

Bukan tutorial lengkap, tetapi saya harap itu membantu mengarahkan Anda ke arah yang benar di masa mendatang.

Berikut adalah kode yang Anda cari:

<table width="900" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="57" height="43" valign="top" rowspan="2">
      ![Rashel Adragna](http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_head.png)
    </td>
    <td width="843" height="43" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<a href="" style="color: #D31145; font-weight: bold; text-decoration: none;">RASHEL ADRAGNA</a><br>
REALTOR | P 855.900.24KW
    </td>
  </tr>
  <tr>
    <td width="843" height="64" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
![Zopa Realty Group logo](http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_logo.png)
    </td>
  </tr>
  <tr>
    <td width="843" colspan="2" height="20" valign="bottom" align="center" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
    </td>
  </tr>
</table>

Anda akan mencatat bahwa saya telah menambahkan 10px ekstra ke beberapa sel tabel Anda. Ini dikombinasikan dengan align/valigns yang berfungsi sebagai padding di antara sel Anda. Ini adalah cara cerdas untuk menghindari keharusan menambahkan padding, margin atau sel padding kosong.

John
Jawaban edit 29 Oktober 2013 в 3:40
Komentar (3)