Problems setting up Table with CSS

I'm creating a commercial project in JSF, and to start the project I started to create the layout of the pages, to create the project, I'm doing it in pieces, and in each piece of the project I'm creating small projects that will be part of a single project.

The part that I wanted to stop is the page that will display the products.

I would like you to look closely at the line of code below;

<table>
    <ui:repeat var="produto" value="#{pesquisaProdutoBean.produtosListados}" varStatus="status">

        <tr>
            <td> <h:graphicImage library="images" name="relogio.jpeg"/> </td>
            <td> descrição do relogio </td>
            <td> valor do relogio </td>
        </tr>

    </ui:repeat>
</table>

It's getting like this;

Youcanseethatthereisafirstcolumnthatcontainstheimageandanothersecondcolumnthatcontainsthedescription,allpagesinJSFwithtablesarethesame.

Lookatthisotherexample;

Inthisexample,thingsareverydifferent,theimagesareinoneline,thedescriptionisinanotherlineandthevaluesinanotherline.

Whileinthefirstimagetheitemsarearrangedincolumns,inthesecondimagetheyarearrangedinlines.Iwantedtobeabletoorganizemytableinrowsandnotcolumns,IhavemadesomeattemptsbutIdidnotsucceed.Ineedtoknowhowtodothis.

IputmyXHTMLlikethis;

<h:form><table><ui:repeatvar="produto"
                                value="#{pesquisaProdutoBean.produtosListados}"
                                varStatus="status">

                                <div class="row">
                                    <div class="col-md-4">
                                        <h:graphicImage library="images" name="relogio.jpeg"
                                            id="imagemProduto" />
                                    </div>
                                    <div class="col-md-4">
                                        <div id="descProduto">RELÓGIO FOSSIL FCH2784N</div>
                                    </div>
                                    <div class="col-md-4">
                                        <div id="descValor">R$ 500,00</div>
                                    </div>

                                </div>

                            </ui:repeat>

                        </table>

                    </h:form>

CSS:

#descProduto{
    position:relative;
    margin-top:50px;
    text-align: left;
}
#descValor{
    position:relative;
    margin-top:50px;
    font-size:18px;
    text-align: left;
    font-style: italic;
}

Being that it was not what I wanted;