Home / Questions / 313071
Accepted
Richard
Asked: 2020-12-02 23:54:39 +0800 CST 2020-12-02 23:54:39 +0800 CST

How to place 2 elements or more inside a td?

  • 772

I am trying to place 2 elements inside a td at the moment I use 2 buttonbut they can be any other element

Elements must be centralized

One way to do it is by creating another tableinside td, which apparently you can't insert another trinside a td.

but there are 2 problems with this

  1. Items are not centralized.
  2. It is clearly seen that it is a table within another which I do not want it to be seen.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  align-content: center;
}
</style>
</head>
<body>

<table style="width: 100%;">
<tbody>
<tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
    <td><table><tr><td><Button>a</Button></td><td><Button>b</Button></td></tr></table></td>
  </tr>
  <tr>
  </tr>
</tbody>
  
</table>

</body>
</html>

html5

2 Answers

  1. see if this works for you.

    <TABLE BORDER>
	<TR>
		<TH>Primero</TH>
		<TH>Segundo</TH>
		<TH>Tercero</TH>
	</TR>
	<TR>
		<TD>Celda 1</TD>
	    	<TD>Celda 2</TD>
	    	<TD>Celda 3.1<br> Celda 3.2</TD>
	</TR>
	<TR>
		<TD>Celda 4</TD>
	    	<TD>celda 5<br>celda5.1 </TD>
	    	<TD>Celda 6</TD>
	</TR>
</TABLE>

    And for them to focus, as simple as putting ALIGN=

    <TABLE BORDER>
	<TR>
	    <TH>Primero</TH>
	    <TH>Segundo</TH>
	    <TH>Tercero</TH>
	</TR>
	<TR ALIGN=center>
	    <TD>Todas aCentroCelda 2</TD>
	    <TD>Tambien al centro<br> Centro doble</TD>
	</TR>
	<TR>
	    <TD ALIGN=right>Alineado a la derecha</TD>
	    <TD ALIGN=center>Alineado al centro</TD>
	    <TD>Por defecto<br>Alineado a la izquierdat</TD>
	</TR>
</TABLE>

    • 0
  2. Best Answer

    I understand that since you have not used classes and if on-page and on-line styles it is a table for something similar to a mailing campaign or similar, that is why I give you as an example the solution applying online styles. I hope this helps you:

    <body>
<style>
table, th, td {
  border: 1px solid black;
  align-content: center;
}
</style>



<table style="width: 100%;">
<tbody>
<tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
    <td><table style="
    border: none;
    /* empty-cells: hide; */
    align-items: center;
    text-align: center;
    width: 100%;
"><tbody><tr><td style="
    border: none;
"><button>a</button></td><td style="border: none;"><button>b</button></td></tr></tbody></table></td>
  </tr>
  <tr>
  </tr>
</tbody>
  </table>
</body>
    • 0